Understanding CSS Positioning

The positioning in CSS through the position property is the mechanism that allows us to remove elements from their natural flow and place them at another point on the screen.

So far, the browser stacked our boxes one below the other in a predictable and orderly fashion, occupying all the available width.

But sometimes we need to break these rules to create more complex designs, such as overlapping text on an image, leaving a fixed top menu, or placing a floating button in a corner.

In CSS, the position property gives us that ability to control the location of each element on our page. To move them, we will use special coordinates: top, bottom, left, and right.

But before we start moving things around, there are a few things we need to know about the different positioning modes at our disposal.

Normal Flow (position: static)

By default, absolutely all HTML tags have a positioning of static. It is the simplest and most basic.

This simply means that the browser places them in the order in which they appear in your HTML code.

Relative (position: relative)

If we apply position: relative to a box, at first glance absolutely nothing will happen. The behavior will be the same as static.

However, relative activates its movement coordinates. That is, we can use the direction properties to displace the box taking its original position as a reference.

.moved-box {
    position: relative;
    top: 20px;  /* Pushes it 20px DOWN from its original position */
    left: 10px; /* Pushes it 10px to the RIGHT from its original position */
}

Absolute Position (position: absolute)

When applying :key[position: absolute], we are instructing the browser to completely remove and tear the element out of the normal document flow.

Structurally, the box will cease to exist for its sibling elements. Its original space will instantly collapse, and the rest of the page will reorder upwards, as if that HTML element had never been written in the code editor.

Once removed, the box will look for a reference point to inject its top, bottom, left, or right coordinates relative to its Positioning Context.

.parent-container {
    position: relative; /* Creates the cage or positioning context */
    width: 300px;
    height: 300px;
}

.absolute-child {
    position: absolute;
    bottom: 0; /* Sticks to the inner bottom of its parent container */
    right: 0;  /* Sticks to the inner right wall of its parent container */
}

Fixed to the Screen (position: fixed)

The :key[fixed] positioning clamps itself to a point on the screen, caring about nothing else. It’s a bigger, more radical sibling of absolute positioning.

Like absolute, it completely tears the element out of the document flow and leaves no trace of its space.

But fixed totally ignores all its parents and containers in the DOM. Its sole and exclusive reference point is the Viewport (the physical, visible browser window on your screen).

If you tell a fixed element to place itself at top: 0 and left: 0, it will clamp itself to the top-left corner of your monitor. And it will not move from there under any technical concept, no matter how much the user scrolls vertically or horizontally through a mile-long page.

Sticky (position: sticky)

We come to the latest addition to the CSS standard. It serves, for example, to create elements that move with the scroll, but then stay at the top “stuck”.

An element with :key[position: sticky] acts like a dynamic mix between relative and fixed. When the page loads, the box behaves like relative, occupying the document flow.

But, when the user scrolls, when the box crosses a threshold that we have defined via coordinates, it becomes “stuck”, floating on the screen.

.section-title {
    position: sticky;
    top: 0px; /* Behave normally until you hit the screen's ceiling (0px), then stick */
    background-color: darkblue;
    color: white;
}

Controlling the Z Axis (z-index)

The moment we start tearing boxes out of their flow with absolute or fixed, it is inevitable that they will overlap each other, hiding text or images.

By default, the browser renders the layers using the order of the HTML code: the tag written lowest in your file will be drawn on top of the rest.

To alter this rule and take control of the depth axis (the third dimension towards the user’s eyes), we use the z-index property.

This property accepts integer numeric values, both positive and negative. A box with z-index: 10 will always be drawn on top of and visually obscure a box with z-index: 1.