CSS Positioning

The position property in CSS is very tricky to understand but is a powerful tool when working with layouts. The position values are static, relative, fixed, and absolute: each of these act in their own special way to effect where elements are rendered on the screen and how they effect the rendering of other elements. Depending on the value of the position property, top, bottom, left, and right will have different effects on our element.

NOTE This page has positionable examples (there's one already fixed to the top). If you want to toggle these examples, click the button in the bottom right (BTW that's position fixed too!). The inputs represent the top and right properties on the parent element and tweaking these inputs will move the boxes around so that you can play with these values right in this book.

position: static

Static positioning is the default value for the position property. This means that the position of the current element will be determined only by its box model (width, height, padding, margin, and border).

To move statically positioned elements we can use margins to add extra white space and this will effect any HTML elements that come after the element in HTML. With position: static the top, bottom, left, and right properties have no effect.

position: relative

Relative positioning allows us to slightly tweak the existing position of an element from where it would usually be statically positioned. The top, bottom, left, and right push the element from the specified edge.

Elements with position: relative will still effect the rendering of based on their original position. This means that position: absolute; top: 20px; will start to cover up elements after it so be VERY AWARE of when we use position: relative. Except for small changes like lining up inline-block icons, position: relative is probably not what we want to use for positioning.

position: fixed

Fixed position allows us to set an element to be positioned in the same spot no matter where the element is in our HTML and no matter where the user has scrolled. The top, bottom, left, and right match the specified edge to that same edge of the viewport. So position: fixed; top: 0; right: 0; will "pin" the element to the top right of the viewport. See the example one on this page?

position: fixed elements are on a whole different plane from static and relatively positioned elements. This means that when it comes time to figure out where to draw elements on the page, it ignores anything that is position: fixed. So it doesn't take up room within the parent element.

position: absolute

Absolute positioning allows elements to be positioned absolutely in comparison to other elements on the page. The way this works is that element looks for the first parent element that isn't position: static and then uses that to compare where to position the current element. From there, the top, bottom, left, and right work much in the same way as position: fixed does except instead of comparing to the edge of the viewport, the element is positioned comparing to the edge of the non-static parent element.

NOTE if all parent elements are statically positioned, then the element will position itself in comparison to the body element. This is different from display: fixed since scrolling WILL effect the elements position. See the yellow example in the top left (you may need to scroll up).

position: fixed;

position: absolute;
transform: translateX(100%);

position: relative;

position: absolute;

Positions to bottom instead of top

position: relative;