Complete guide to CSS positions

The position property specifies the type of placement method used for the element. This property works with the left, right, top, bottom and z-index properties to determine the final position of an element on a page.

CSS positions and helper properties CSS is how we define the layout and design of a website. CSS placement is how we position each element in a document. This property is a keyword and we put a value in it to set the specific position of the element.

There are five main values for the position property. We explain it in detail below:

static
relative
PERFECT
cured
sticky

First, we set the position property. Then the coordinates of the element are set using helper properties:

Surface
BELOW
on the left
REAL
from index

Static: This is the default value for elements. The element is positioned according to the normal flow of the document. The left, right, top, bottom and z-index properties do not affect an element with position: static.

<html>
    <body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>

            <div class="main-element">
                All eyes on me. I am the main element.
            </div>

            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

Let's add position: static to the div with the class main-element and left, top values to it. We also add some styles to the other divs to differentiate them from the element in focus.

.main-element {
    position: static;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.sibling-element {
    padding: 10px;
    background-color: #f2f2f2;
}

Relative: Elements with position: remain relatively in the normal flow of the document. However, unlike static elements, the left, right, top, bottom, and z-index properties affect the position of the element. An offset based on the values of the left, right, top, and bottom properties is applied to the element relative to itself.

.main-element {
    position: relative;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

Absolute: The element is removed from the normal flow of the document and no space is created for the element in the page layout. It is located relative to the position of the nearest ancestor, if any; otherwise, it is positioned relative to the initial containing block. The final position is determined by the top, right, bottom, and left values.

This value creates a new stack context if the z-index value is not auto. The edges of perfectly placed boxes will not collapse into other edges.

.main-element {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

.sibling-element {
    background: #f2f2f2;
    padding: 10px;
    border: 1px solid #81adc8;
}

Fixed: Fixed position elements are similar to absolutely positioned elements. They are also removed from the normal flow of the document. But unlike absolutely positioned element, they are always positioned relative to the element.

.main-element {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: yellow;
    padding: 10px;
}

html {
    height: 800px;
}

Sticky: The element is positioned according to the normal flow of the document and then indents the next scrolling ancestor and contains the block (closest block-level ancestor), including table-related elements, based on the top, right, bottom, and left values. The offset does not affect the position of any other elements.

This value always creates a new stack context. Note that a sticky element will "stick" to its nearest ancestor using the "scrolling mechanism" (created when an overflow is hidden, scrolled, automatic, or overloaded), even if that ancestor is not the closest, which is actually a scrolling ancestor.

.main-element {
    position: sticky;
    top: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 800px;
    padding: 50px 10px;
    background-color: #81adc8;
}

Complete guide to CSS positions

Table of contents

No headings in the article.