Process

Extra process

Source

The z-index property defines the order of the elements on the z-axis. Basically, it works on elements with a position value other than static.

Example 1

The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one.

Example 1

How the default source order works

Positioned element(s)

Elements with a position value other than static.

Non-positioned element(s)

Elements with the static position value.

By default, latter elements in the HTML code will appear in front of former elements.

Example 2

Positioned elements appear in front of non-positioned ones.

Negative z-index

Based on how the source order works an element with
a negative z-index should be above the background of its parent.

Example 3

Now, the red block can’t go behind its parent even if you add z-index: -9999 to it. Why? Because the red block is a part of the wrapper stacking context.

It’s a parent that contains one or multiple elements. Those elements will be stacked according to the source order rules, and their z-index values only have meaning within their parent.

Example 4

Note: that a stacking context can contain other stacking contexts (AKA nesting).

Example 5

What creates a new stacking context?

Opacity and etc.

Example 1

How the default source order works

Example 1 and 6

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

Static

The default position for an element is position: static, which doesn’t have any effect on the element.

Example 2

Relative

An element with position: relative. The top and bottom properties specify the vertical offset from its normal position. The left and right properties specify the horizontal offset from its normal position.

Example 2

Absolute

An element with position: absolute. The top and bottom properties specify the vertical offset from its containing block. The left and right properties specify the horizontal offset from its containing block. For absolute positioning, the containing block is the closest positioned parent (An element with a position other than static)

Example 2

Fixed

An element with position: fixed. The top and bottom properties specify the vertical offset from its containing block. The left and right properties specify the horizontal offset from its containing block. The containing block for fixed positioned elements is the viewport, except when an element’s parent has one of the following properties applied to it: transform, filter or perspective.

Example 2

How top, right, bottom, and left works?

Those properties represents the direction of where the element should be positioned, in case it has position: relative. They also represent the boundaries of the containing block, if the element has position: absolute.

Example 2

Sticky

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

Example 7

CSS position sticky has two main parts, sticky item & sticky container.

Sticky Item — is the element that we defined with the position: sticky styles. The element will float when the viewport position matches the position definition, for example: top: 0px .

Sticky Container — is the HTML element which wraps the sticky item. This is the maximum area that the sticky item can float in.

Example 7

When you define an element with position: sticky you’re automatically defining the parent element as a sticky container!

Understanding the CSS Sticky Behavior

Relative (or Static) — the stickily positioned element is similar to the relative and static positions because it keeps the natural gap in the DOM (stays in the flow).
Fixed — when the item sticks, it behaves exactly like position: fixed, floating in the same position of the view-port, removed from the flow.
Absolute — at the end of the sticking area, the element stops and stacks on top of the other element, much like an absolutely positioned element behaves inside position: relative container.

Conclusions:

Quiz: