Notes (mostly to myself) on how the CSS position property works because I constantly forget.
Having control over where elements are positioned on a webpage is essential for building
The position property determines where an element appears on the page. Sounds simple. But it also includes how an element relates to its parent element, the browser window, how it behaves on scroll, and whether placement properties like top, right, bottom, left and z-index will have any effect.
static is the default value for elements. They stick to the normal page flow and placement properties (top, left, z-index, etc.) don't have any effect.
relative keeps the element in the normal document flow, but allows us to use placement properties. This means we can move the element up, down, left or right, relative to where it would have been in the normal document flow.
For example, if we nudge this box -10px up, and -10px to the left, it moves to here:
In our CSS we would just need to declare a relative property on our box, then add top and left properties:
1.redBox {2 position: relative;3 top: -10px;4 left: -10px;5}
absolute removes the element from the normal document flow. It places itself on an absolute position relative to the whole document.
The position of the parent has no influence on where the child shows up. Placement values like top and left are calculated relative to the document.
Declaring position: absolute, left: 10px and bottom: 20px on this .redBox element would position it 10 pixels from the left and 10px from the bottom of the document.
If you declare position: relative on the parent element, and position: absolute on the child, it now positions itself relative to the parent.
This is useful for creating overlapping elements.
fixed is similar to absolute, but sticks itself to the viewport rather than the document. Fixed elements don't move when you scroll down the page - they are always visible.
Fixed is useful for persistent elements like navigation bars or menus.
Declaring position: fixed;, top: 10px; and right: 10px on an element will position it 10 px from the top and right-hand side of the browser viewport. The rest of the document scrolls behind it.
If any parent element has a transform: translate() property declared on it, fixed won't work.
sticky makes an element "stick" to the viewport when it reaches a certain point – usually when the top of the viewport hits the top of the element.
It behaves like a relative element until it hits the sticking point, and then becomes fixed.
For sticky to work, the parent element needs to have the relative property declared.
inherit forces an element to inherit the position property of its parent. This wouldn't otherwise happen as position doesn't flow down the cascade.