css-position

问题 I am trying to insert a div into any part of the body and make its position: absolute relative to the whole document and not a parent element which has a position: relative . 回答1: You will have to place the div outside of the position:relative element and into body . 回答2: You're looking for position: fixed . From MDN: Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This is often used to create a floating element

问题 position: sticky works on some mobile browsers now, so you can make a menu bar scroll with the page but then stick to the top of the viewport whenever the user scrolls past it. But what if you want to restyle your sticky menu bar slightly whenever it's currently 'sticking'? eg, you might want the bar to have rounded corners whenever it's scrolling with the page, but then as soon as it sticks to the top of the viewport, you want to get rid of the top rounded corners, and add a little drop

问题 There are any shorthand for top right bottom left or for width and height ? I have a lot of css like this #topDiv { position:absolute; top:0px; left:0px; right:0px; height:100px; } #centerDiv { position:absolute; top:100px; bottom:120px; left:0px; right:0px; } #consoleDiv { position:absolute; left:0px; right:0px; bottom:0px; height:120px; } I would like to do anything like this position: absolute 10px 50px 50px 100px; or size: 400px 200px; 回答1: No short-hand exists to combine all of these

问题 I have a two columns layout like this: <div class="row"> <div class="col-xs-8 content"> </div> <div class="col-xs-4"> </div> </div> If I set the position:sticky to the sidebar column, I get the sticky behaviour of the sidebar: https://codepen.io/marcanuy/pen/YWYZEp CSS: .sticky { position: sticky; top: 10px; } HTML: <div class="row"> <div class="col-xs-8 content"> </div> <div class="col-xs-4 sticky"> </div> </div> But when I set the sticky property only to the menu that is located in the

问题 I have a div positioned fixed on the left side of a web page, containing menu and navigation links. It has no height set from css, the content determines the height, the width is fixed. The problem is that if the content is too much, the div will be larger than the window's height, and part of the content will not be visible. (Scrolling the window doesn't help, since the position is fixed and the div won't scroll.) I tried to set overflow-y:auto; but that doesn't help either, the div doesn't

问题 I have 3 levels of div : (In green below) A top level div with overflow: hidden . This is because I want some content (not shown here) inside that box to cropped if it exceeds the size of the box. (In red below) Inside this, I have div with position: relative . The only use for this is for the next level. (In blue below) Finally a div I take out of the flow with position: absolute but that I want positioned relative to the red div (not to the page). I'd like to have the blue box be taken out

问题 How to make a div remain fixed after you scroll to that div ? I have a div that is later in a page and you need to scroll to get to that div . If I use: .divname { position: fixed; } The div will appear before it should appear normally. Maybe a good example of what I need is second ad on 9gag. If your screen resolution is low enough, you won't see that ad after you load the front page, but after you scroll down, you'll see the second ad and it will remain fixed while you scroll down. 回答1: I

问题 In CSS, what is the difference between static (default) positioning and relative positioning? 回答1: Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left , top , right and bottom rules: Relative positioning allows you to specify a specific offset ( left , top etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside

问题 I'm trying to improve my understanding of Java, particularly Java GUI, by making a puzzle program. Currently the user selects an image, which is cut up into a specified number of pieces. The pieces are drawn randomly to the screen but they seem to be covered by blank portions of other pieces, and not all of them show up, but I can print out all the coordinates. I am using absolute positioning because a LayoutManager didn't seem to work. I briefly tried layeredPanes but they confused me and

问题 This code was working fine on my iphone before updating to iOS 9.0.1 (13A404), but now the same code seems to be working only after finger release, or after the jQuery onscroll ends, when I do a quick swipe leaving the page scrolling... $(document).on('scroll', function(){ if( $(this).scrollTop() > 0){ $('.menu').addClass('sticky'); }else{ $('.menu').removeClass('sticky'); } }); The sticky menu just disappears until I release the finger up from the screen, losing the "stickying" effect in