CSS Position Playground (codepen.io)
This code makes 4 boxes, one parent and all other inside the parent.
My question is why boxes extend till the window’s end?
And when you set any box’s position: absolute, It becomes a short box with some width, why is that happening?
The elements are divs which are block-level elements. They take up the full width available.
When you make them position absolute they are taken out of normal document flow and their default size will be that of their content, which you can see if you type some more text into the div you make position absolute. You can still set an explicit width on them.
The position absolute element will also overlap other elements because out of flow elements do not interact with other elements. They can be positioned anywhere on the page using offsets (left/right/top/bottom) without other elements affecting their position.
When using position absolute you usually will set the parent container to position relative so the offset positioning is relative to that parent container. Otherwise, the positioning will be relative to the window (i.e. the containing element).
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.