Notes (mostly to myself) on how the CSS position property works because I constantly forget. Specifically in relation to building scrollytelling 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.

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.

Position has six possible values

1. Static

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.

.tealBox {
	position: static;
}

2. Relative

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 top and left properties:

.tealBox {
	position: relative;
	top: -10px;
	left: -10px;
}

3. Absolute

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: 20px and bottom: 20px on this .tealBox element would position it 20 pixels from the left and 20px from the bottom of the document.

.tealBox {
	position: absolute;
	left: 20px;
	bottom: 20px;
}

.parent {
	position: relative;
}
.tealBox {
	position: absolute;
	left: 20px;
	bottom: 20px;
}

4. Fixed

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.

Declaring position: fixed;, 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.

.tealBox {
	position: fixed;
	top: 20px;
	right: 20px;
}

5. Sticky

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 fixed.

For sticky to work, the parent element needs to have the relative property declared.

.parent {
	position: relative;
}
.tealBox {
	position: sticky;
	top: 150px; /* Box becomes sticky when the top of
  the viewport is 150px away from the top of the box  */
}

6. Inherit

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.