You need to make all the elements to stick to the same container (containing block) by adding some offsets. Here is a basic example where the elements will stick to the body: body { margin:0; min-height:200vh; border:2px solid; } .first { height:50px; background:red; position:sticky; top:0; } .second { height:50px; background:blue; position:sticky; top:52px; } .third { … Read more
This is related to the “hasLayout bug” of IE. The relatively positioned #panel parent doesn’t have layout and hence IE forgets to redraw its children when it get resized/repositioned. The problem will go if you add overflow: hidden; to the relatively positioned #panel parent. #panel { position: relative; overflow: hidden; border: solid 1px black; } … Read more
We also encountered this bug on 2 different iPad applications, for us the best fix was to temporarily remove the fixed position from the fixed element once the animated scroll had finished, then use window.scroll with the vertical value we’d just performed the animated scroll to, then finally re-apply the position fixed style. It does … Read more
You’d use margin, if you wanted to move a (block) element away from other elements in the document flow. That means it’d push the following elements away / further down. Be aware that vertical margins of adjacent block elements collapse. If you wanted the element to have no effect on the surrounding elements, you’d use … Read more
With position: fixed, your header element is removed from the document flow. The first in-flow element is main, which has margin-top: 90px in your code. The parent of this element is body, which normally has a default margin: 8px (see HTML default style sheet). Due to CSS margin collapsing, the body element’s margin-top: 8px is … Read more
The standard generally says if top/bottom, left/right are auto, then default them to their position: static values: http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height
You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least. body, html { height: 100%; width: 100%; } div#content { width: 100%; height: 100%; }
Specifying a non-static position, e.g., position: absolute/relative on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/ See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Positioning_contexts We can change the positioning context — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the … Read more
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 … Read more
Because position: absolute resets the relative position for children just as position: relative does. There is no way around this – if you want the third div to be absolutely positioned relatively to the first one, you will have to make it a child of the first one.