CSS tips and tricks #5-Playing with positioning

Static, relative, absolute, fixed and now also add a sticky to it. CSS position property can be a bit harder to understand and to use all of its hidden powers. In this post I will also show you a quick trick to horizontally and vertically center any element using position property with margin. This also works even if you use float (which normally breaks margin). Let’s code a bit …

Setting the scene

First, let’s create basic HTML and CSS for our playground. It will be very simple, only three divs with different colors. These divs will have width and height of 50 pixels. Colors selected for this exercise are Peter River (azure blue), Turquoise (pastel green) and Sun Flower (saturated pastel yellow).

HTML:

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

CSS:

div {
 position: static;
 width: 50px;
 height: 50px;
}
.one {background: #3498db;/*Peter River*/}
.two {background: #1abc9c;/*Turquoise*/}
.three {background: #f1c40f;/*Sun Flower*/}

Static

The easiest and default value for CSS position property is static. By adding this value you will set the elements to render in order just like they appear in the document. Easy and simple. Example of static position:

CSS:

div {position: static;}

The result is three divs stacked under each other (divs are block elements – the take whole line) in same order as you wrote the code. Div with class “one” will be first, then “two” and at the bottom will be “three”.

Fixed

Next value is fixed (relative will be the last one). This value will cause any element to stay in its current position and visible no matter where the browser will scroll. Imagine gluing some element on your screen – you can scroll up and down, left and right and the element will be still there. Example of fixed position:

CSS:

div {position: fixed;}

If you set “fixed” position this way, to all divs, they will be stacked on top of each other so only the last – yellow – will be visible. The reason is that they all have default top and left set to 0. To get the result like with static position, you can set the top to 50px (height of div) individually for each of them.

CSS:

div {position: fixed;}
/*first will stay in its place*/
.two {top: 50px;}
.three {top: 100px;}

Now you will get three divs stacked like with static position, but the will remain visible (on same place) when you scroll the page.

Sticky

This value is experimental and will work only in FF 32 and up after enabling it in preferences and Chrome if you have enabled experimental features in flags. This positioning is a kind of hybrid of relative and fixed positioning. When you set some element as sticky, it will behave as relative positioned until browser cross a specified threshold, then it will behave like fixed. Simply, if you set your navigation to “sticky”, it will be relative until you scroll the page. At that moment, navigation will remain visible at the same position like set to fixed.

CSS:

.navigation {position: sticky;}

Result will be navigation (relative-like) that will automatically stick to top of the page (fixed-like) and remain visible when you scroll down.

Absolute position

Element with absolute position will behave like fixed except it will not remain visible. Just like fixed and relative position, absolute has top, right, bottom and left properties set to 0 by default. So, if you use absolute position on our divs, the will again be stacked on each other. To change this, just move the second and third from 50px top (100px for third).

CSS:

div {position: absolute;}
.two {top: 50px;}
.three {top: 100px;}

Now, divs are stacked and if you scroll enough, they will not be visible.

Relative

This one is more playful. When you set some element to relative, it position itself just like it would as static. However, if you also use any of top, right, bottom or left properties, the element will move for value you defined from its default (static-like) position (place where it would normally be).

CSS:

div {
 position: relative;
 left: 10px;
}

Divs will be stacked under each other and also moved 10px from left.

There is also one more function related to absolute position.

Relative + absolute

You can use these two position values to modify you document’s flow in more interesting way. For this let’s change the HTML a bit … We will wrap our divs inside another div with class “parent”.

HTML:

<div class="parent">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>

Now, we will set the “parent” position to relative and move it 30px from top and left. Next, the position of divs nested inside will be set to absolute. To keep child divs stacked in column and visible, move them from top for 50px (.two) and 100px (.three).

CSS:

.parent {
position: relative;
top: 30px;
left: 30px;
}
.parent div {position: absolute;}
.two {top: 50px;}
.three {top: 100px;}

Do you see it? Our three divs are not in top left corner like they should be with “absolute” positioning. Instead, they are 30 pixels from top and left. Reason? When you use absolute positioning on element while its parent has set relative position, the child will position itself relatively to its parent. So, even if our divs are positioned as absolute, they are not in top and left 0px, but in top and left 30px like their parent.

One more thing … If you change the position of parent, its child elements will move to.

Trick of the day

As I promised, here is a trick to center any element, even if floated, using position and margin properties.

Set position of an element to absolute, top, right, bottom and left properties to 0 and margin to auto. Let’s also add float set to left (just to test it).

CSS:

element {
float: left;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

See? Element is perfectly centered even when using float property.

Summary

You can have a lot of fun with CSS position property and create amazing stuff. I hope that you fully understood everything.

If you liked this article, please subscribe so you don't miss any future post.

Subscribe

If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂

Become a Patron Donate via Paypal