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 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
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
You need to refer to the specification to understand this. If your element is not positionned using position:absolute then you need to consider this section where you can read: If both ‘margin-left’ and ‘margin-right’ are ‘auto’, their used values are equal. This horizontally centers the element with respect to the edges of the containing block. … 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
When you use position:absolute;, the element is taken out of the normal page flow. Therefore it no longer affects the layout of its container element. So the container element does not take into account its height, so if there’s nothing else to set the height, then the container will be zero height. Additionally, setting display:inline-block; … Read more
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.