CSS Positioning

📣 Sponsor

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:


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:


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;)


    .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;)


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


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


<div class="container">
    <div class="item-1"></div>
    <div class="item-2"></div>
</div>


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


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

CSS Sticky Positioning

CSS has another positioning value, called sticky. Sticky works a little like fixed, but it is contained by its parent and will not scroll until you scroll past it.

We have a dedicated article on the CSS sticky property, which you can find here.

Last Updated 1617479440678