Table of Contents
Table of Contents
Notes (mostly to myself) on how the CSS position property works because I constantly forget. Specifically in relation to building pieces.
Having control over where elements are positioned on a webpage is essential for building scrollytelling stories. We have to understand exactly how elements will behave within the layout, especially in relation to the scrollbar and viewport.
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
z-index will have any effect.
Position has six possible values
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.
This would be the equivalent code, but we never need to explicitly declare it since all elements are static by default.
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
-20px up, and
-20px to the left, it moves to here:
In our CSS we would just need to declare a
relative property on our box, then add
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
left are calculated relative to the document.
left: 20px and
bottom: 20px on this
.tealBox element would position it 20 pixels from the left and 20px from the bottom of the document.
fixed is similar to absolute, but sticks itself to the viewport (the browser window) 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.
top: 20px; and
right: 20px on an element will position it 20 px from the top and right-hand side of the browser viewport. The rest of the document scrolls behind it.
sticky makes an element "stick" to the viewport (the browser window) 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
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.