CSS position

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

A positioned element is an element whose computed position property is relative, absolute, fixed or sticky.

An relatively positioned element is an element whose computed position property is relative.

An absolutely positioned element is an element whose computed position property is absolute or fixed.

A stickily positioned element is an element whose computed position property is sticky.

The top, right, bottom, and left properties specify the position of positioned elements.

*From Mozilla Developer Network*

This post talks about relative, absolute, and fixed, which are three most frequently used position values.

relative

When position: relative is set to an element, and its top is set to be 20px, this element’s position is lower than its original position at 20px where position: relative is not set. Similarly for right, bottom, and left.

A typical mistake here is to think the element will be relative to its parent or the screen.

absolute

We usually use position: absolute to set the element’s position according to the screen. But it can do more.

fixed

When we want some element to be at a fixed position when user scrolls down, position: fixed is used.

Combination of position

Relative to Parent

Sometimes we need to set an element’s position to be a certain value relative to its parent element. How can this be achieved?

First, set the position of its parent to be relative or absolute (if you don’t want to change the position of its parent, relative will be OK).

Next, set the position of the element to be absolute and set its top, right, etc. values.

Now, the element is relative to its parent.

Run the following code

<div id="parent">
    <div id="child">
    </div>
</div>
#parent {
    background-color: yellow;
    width: 300px;
    height: 200px;
    margin: 50px;
    
    position: relative;
}

#child {
    background-color: green;
    width: 50px;
    height: 50px;
    
    position: absolute;
    top: 20px;
    left: 30px;
}

If its parent’s position is not set explicitly, then it’s static by default. And an element of position: absolute with a parent of position: static will have a position relative to the parent’s parent. If its parent’s parent’s position is static, then it will be relative to its parent’s parent’s parent, etc. In the end, it will be relative to the screen.

Run the following code

#parent {
    background-color: yellow;
    width: 300px;
    height: 200px;
    margin: 50px;
}

#child {
    background-color: green;
    width: 50px;
    height: 50px;
    
    position: absolute;
    top: 20px;
    left: 30px;
}

Fixed Position

You may already know that setting position: fixed can make an element stay the same position when user scrolls down.

Run the following code

#parent {
    background-color: yellow;
    width: 300px;
    height: 200px;
    margin: 50px;
}

#child {
    background-color: green;
    width: 50px;
    height: 50px;
    
    position: fixed;
    top: 20px;
    left: 30px;
}

If, however, you want to make an element fixed to its parent, you may refer to this answer at StackOverflow. A quick conclusion here is there’s no elegant solution currently.

Homework

Try with different combinations of position and raise questions if you may.