CSS

CSS Positioning

Elements in CSS are positioned by default according to their order in the HTML document you are targeting. However, this is not always the way you want items to be displayed.

Fortunately, CSS has a property known as position which lets us move objects around. Positions are described as:

  • relative - we are positioning the object relative to its original position.
  • absolute - we are positioning the object relative to its nearest relatively positioned parent.
  • fixed - we are positioning the object relative to the viewport. That means the object 'sticks' to the page.
  • static - the default value. This means an object cannot be moved.

Positioning Rules

An object can have its position altered using the top, right, bottom or left keywords. For example, with position relative, we may write this:

css Copy
div { position: relative; top: 20px; left: 5px; }

As you might imagine, this will move all divs 20px from the top, and 5px to the left. As expected, we can also move it from the right, or bottom:

css Copy
div { position: relative; bottom: 15px; right: 2px; }

Absolute Positioning

If relative moves an object relative to its original position, then absolute positions it based on the closest parent which has a relative position. If none are found, it will position it based on the edge of the page.

An example is shown below. The absolute div is moved from the top left corner of the parent relative div.

Relative
Absolute (top: 80px; left: 70px;)
css Copy
.absolute-div { position: absolute; top: 80px; left: 70px; }

Interesting Behaviours

So what happens if we use both left and right, or top and bottom together, with an absolute div, for example? Well, in the below example, the left value will be 5px, and the right is 5px.

Assuming the div doesn't have a width, the div will change width so that it is both 5px from the left, and 5px from the right.

Relative
Absolute (top: 80px; left: 5px; right: 5px;)
css Copy
.absolute-div { position: absolute; top: 80px; left: 70px; }

Fixed Positioning

The final (and quite useful) positioning property we will cover is fixed. This is often used for fixed headers which are always stuck to the top of the page.

Let's take a look at an example:

css Copy
.fixed-div { position: absolute; top: 80px; left: 70px; }
I am a fixed div

Z-index

Since we are talking about positioning, let's talk about z-index which refers to the order along the z axis. Usually, HTML items further down the HTML document are on top, but with z-index we can alter that. A higher z-index, means the element is more 'on top'. Take a look at this example:

html Copy
<div class="container"> <div class="item-1"></div> <div class="item-2"></div> </div>
css Copy
.container { /* Contains the absolute items */ position: relative; } .item-1, .item-2 { position: absolute; top: 0; left: 0; width: 100px; height: 100px; } .item-1 { background: red; top: 20px; left: 20px; } .item-2 { background: blue; }

As you can see, item 2 is on top, as we thought it would be. By default, all items have a z-index of 0, but what if we add a higher z-index to item-1?

css Copy
.item-1 { z-index: 1; }

Now item-1 is higher, which let's us control the order of elements on top of each other on the page.

Last Updated Saturday, 3 April 2021