Why is position not working?
Why is element on top of the page when I want it attached to parent?
Can element be fixed to the parent?
Element is in the DOM but not visible on the page?
How to center element on the page?
This are some questions I stumbled upon on the net regarding CSS position, which can cause a real headache if you don’t take 5 minutes to understand it properly.
I would like to cover some basic principals so you won’t struggle in the future.
Position: static
Aka “the default”. The element is positioned according to natural flow of the document. Nothing fancy. No settings like left, top etc will effect it either.
What will work though is setting margin and padding properties. Want to center div horizontally? margin: auto comes in handy.
Position: relative
Relative position means that the element is positioned relatively to it’s normal position. Sounds gibberish, doesn’t it? It starts to make sense when you actually start moving the element with left, top etc. properties like in example below — dotted frame has originally positioned div, orange background the relative one.
However, note that changing the position affects only this particular element (and it’s children in most cases). It will not cause the siblings to move accordingly. Moreover, with position: relative the original space occupied by the moved element will be preserved in normal flow.
Position: absolute
Usually your first call when comes to fighting unwanted spacing or other mistakes in layout. Wrong. This should be used, but when you know what you are doing. Like, pretty much everything in CSS.
Absolutely positioned element is relative to the first parent in hierarchy which has a set position (static does not count). This means, if the elements direct parent does not have a set position, element will stick to the next in line which does have. Sometimes you don’t have a position set nowhere in the hierarchy and the element will position itself to the body.
Absolutely positioned element is kind of ignored by the parent. It’s on its own. I can be attached to the parent, yes, but parent is not affected by it at all. For example, let’s take static elements and height implied by child contents:
As you can see, the blue child stretched to the height of its contents and so did its parent. Let’s make the child absolutely positioned now:
Parent, even relative, completely ignored child’s height. The absolute position exiles the element from natural flow. All you are left now with are tricks.
For instance, centring horizontally. margin: auto is useless now. What you need to do is ie. set the margin-left to 50% of parent’s width and then slide it left -50% of its own width.
This won’t work with relative value of element width. You must declare it absolute (like above, 200px). Therefore fluid, responsive layout is endangered with excessive use of absolute positioning. Consume in moderation.
Position: fixed
Floating headers! Cookie consents! Newsletter pop-ups!
Fixed elements are positioned in relation to window’s viewport.
Fixed elements children be positioned as usual, no tricks needed here.
But! Can element be fixed in relation to another element?
Yes it can (sort of). It’s original position can be set relatively to an absolutely positioned parent. It will still be “fixed” to the viewport on scroll:
Position: sticky
That’s the cute one for headers and such. I’m old so I don’t use it that often because it’s support is relatively new and non existing on IE and my clients will always test on IE at some point :) Here’s a screenshot of support from Can I use:
Once you set position:sticky, you need to set the moment where it needs to stick on scroll — like top: 0.
The element will be positioned in the natural flow of the document, but once it touches the set value, it will stay fixed.
However, it the element is a child of another element like below, it will stay fixed on the viewport, but still it’s visibility will be relative to the parent. This might solve your “fixed to the parent” problem, doesn’t it?
To sum up
This cover’s the basics of the positions. It’s basic but SO IMPORTANT to understand. If you have any questions or other position issues to point out, please don’t hesitate to let me know.
Coming up next:
- dimensions (width and height, box-sizing etc.)
- displays and float
