CSS Positions

Absolute position

All elements have a default position of static. We can change it to absolute, but this then has to include position properties as follows (not that the position will be relative to its parent, and if there is no parent it will be relative to the document itself):

.absolute {
	position: absolute;
	top: 0;
	left: 0;
}

We can also set positions are relative, which allows the position to be “inherited” down through the containers.

We can also use absolute position to make things disappear from the view without altering the HTML document and keeping things accessible. By simply setting the absolute position to a value far out of the view port page the object will have the effect of disappearing without removing semantic and accessibility features.

Relative position

relative enforces that the object is relative to its parent container by default, but works in much the same way as absolute.

Fixed position

Fixed will always be declared relative to the view port itself. Note that a with fixed the element will remain visible at the same fixed position even as we scroll the view port.

Sticky position

Sticky will remain in its normal flow until it reaches a declared spot. For example, if we say:

.sticky {
	position: sticky;
	top: 0;
}

the element will show up in its normal position. As we scroll, the sticky container will then follow the view port down with 0px of space on top until the container its in starts to run out.

Z-Index

If we create a fixed block that is declared after another element, it will always be displayed on top. this is because these elements are not in the normal flow of the document.

However, we can also manage this by setting appropriate CSS, rather than changing the DOM of the page. This is done by using the z-index property:

 
.on-top {
	z-index: 1;
}

This index can be declared for each element if necessary, and all we have to do is change the relative index positions to ensure that our elements are forward or back as needed.

Examples

We can use sticky or fixed to have a footer that is always visible. We can also use sticky on say headers spo that as we scroll down the page each following headering will “push” the previous out of the page.

Note that if we use fixed position for a footer, for instance, it will take the element out of the normal flow of things - which means we may need to declare a width of 100% so that it spans the whole page.

If we have a single pay we can set an html property to scroll-behaviour: smooth;. This means the page won’t jump between sections and will instead scroll between them.