When are elements overlapping

CSS z-index • Blocks positioned on top of each other

z-index for planes

By default, absolute, fixed and relatively positioned elements are on top of each other in the order in which they appear in the source text of the HTML document - the last element listed is on top.

CSS z-index can change this order and, for example, raise an element that is in the source text before all other elements above the following elements.

.box {position: relative; background: gray} .box div {position: absolute}…
< div style = "background: cyan">

The example shows a frequently used technique for slideshows: the comprehensive block is positioned relatively, the slides in the container are absolutely positioned. Since the slides are not offset there, but rather overlapping, the z-index decides which element is visible in the viewport.

But why does the element with a negative z-index disappear from the picture surface?

The setting »Cyan to the very bottom« with a negative z-index places the cyan box under all other blocks - under the encompassing gray box and even under the text block on this page.

Don't go absolutely, fixed or relative has positioned elements z-index no effect, but for them - to put it simply - z-index: 0 (or for an in-depth look, What You May Not Know About the Z-Index Property).

CSS z-index values

(Default) sets the value of the stacking order to the value of the parent element.
can be a positive or negative integer number.

z-index is always an "integer" - a whole number - and can be positive or negative. With negative values ​​for z-index, the element moves under all elements without a z-index, including all elements that are not positioned.

Like layers in the illustration program

So HTML elements can have three dimensions. The x- and y-position is shown in the viewport of the browser, the z-axis is in the direction of the viewer. The greater the value of the CSS property z-indexthe higher up the element is. In other words, elements with larger z-index values ​​are higher than those with lower values.

Animated slides with z-index

z-index is a numerical property and can therefore be animated. For a tabbed navigation or a slide show, the z-index of a slide is increased so that it comes to the front.

.tabs [id ^ = "tab"]: checked + label {background: white; border-bottom: 0; z-index: 2; }

More about tabbed navigation with CSS / without Javascript