IE7 relative/absolute positioning bug with dynamically modified page content

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

Mobile Safari bug on fixed positioned button after scrollTop programmatically changed…?

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

pure CSS multiple stacked position sticky?

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

CSS: Top vs Margin-top

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

CSS: display:inline-block and positioning:absolute

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

How to make div’s percentage width relative to parent div and not viewport

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 See 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