3. Position

When we want to place elements on top of others, as if they were layers in Photoshop or similar image editing software, we can do it with position.

absolute

It is positioned relative to the document, so it follows the scroll.

.elemento {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

fixed

It is positioned relative to the viewport, so it ignores the scroll.

.elemento {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

More information

inset

To save you from writing each side separately (top, right, bottom and left), you have a style called inset that shortens its declaration. Its structure is the same as using margin or padding.

.elemento {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

It could be represented as:

.elemento {
  position: fixed;
  inset: 0;
}

Or if we only wanted top, right and left.

.elemento {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

It could be represented as:

.elemento {
  position: fixed;
  inset: 0 0 auto;
}

Let's remember that 3 values are equivalent to top | left and right | bottom. Therefore I must drop bottom, and to do so we can use auto.

z-index

It indicates the depth, or Z axis. It starts at 0. The higher it is, the more it will be positioned above other elements, there is no defined limit. It is also possible to use negative numbers to place it below the document.

.elemento {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

More information

There are other position values like static and relative that were used in the past for layout. Nowadays we have more modern solutions such as flex or grid.