CSS can be used to position HTML elements as one of the following: static, relative, fixed, absolute, or sticky, and also define the stack order of an element.

An element with the position set to static is not affected by the top, bottom, left, and right properties, and are always positioned according to the natural flow of the page. Basically the sit where there is room for them to fit after the previous element and before the next.

This is the default and doesn’t need to be specifically written in a rule unless to overcome a previously set CSS rule.

div {
    position: static;
}

An element with the position set to relative is positioned in relation to its natural (static) position.

Setting the top, right, bottom, and left properties causes the element to be adjusted from its natural position.

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

An element with the position set to fixed is positioned relative to the viewport and will remain set in that position even if the page is scrolled. For instance, the following example sets a bar that will sit along the bottom of the screen and stay there even when the page is scrolled.

The top, right, bottom, and left properties are used to position the element.

div {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
}

An element with the position set to absolute is positioned relative to its parent element, and will remain in that same position in its parent even as the page is scrolled and the parent is scrolled up or down the page (it moves on the page, but stays absolutely positioned in the parent).

The top, right, bottom, and left properties are used to position the element.

div {
    width: 200px;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
}

An element with the position set to sticky is positioned based on the user’s scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport and then it “sticks” in place (similar to fixed).

The top and bottom properties are often used to set the spot where the element will become sticky.

The example code below will position the element wherever it naturally sits on the page with elements coming before and after it (relative), and it will scroll with the page until it hits the top position of 0px. Then it will stick in place at that point as the page and the elements following it continue to scroll past it.

div {
    position: sticky;
    top: 0;
}

When elements are positioned, they can also sit on top of or fall under other elements.

The z-index property specifies the stack order of an element, and can have a positive (sits over other elements) or negative (falls under other elements) value. z-index is like layers on the page.

Elements with no z-index value set, are said to be z-index: auto (value of 0).

/* the element will sit over of any elements that have a lesser
value z-index and underneath any that have a greater z-index */
div {
    z-index: 5;
}

/* the element will sit underneath any elements that have a
greater value z-index or have no z-index value set (default) */
div {
    z-index: -1;
}

In the following example, the blue box comes after the red box in the HTML code. It has negative top margin which should pull it over the red box.

But each item has been given a relative position, and we applied a z-index of 1 to the red box to pull it over the blue box. This gives us our layered effect.

• CSS – position Property
  The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).
• CSS – z-index Property
  The z-index property specifies the stack order of an element. An element with a greater stack order is always in front of an element with a lower stack order.

---