Z-index

Stacking order

No z-index and position properties specified:

the stacking order is the same as the order of appearance in the HTML

position is specified (other than static):

any positioned elements (and their children) are displayed in front of any non-positioned elements

z-index is specified:

z-index only works on positioned elements
z-index values can create stacking contexts

Stacking context

Groups of elements with a common parent.

Can be formed in one of three ways:

the root element of a document (the <html> element)
has a position !== static and a z-index !== auto
several newer CSS properties also create stacking contexts
- opacity, transforms, filters, css-regions, paged media

General rule, if a CSS property requires rendering in an offscreen context, it will create a new stacking context.

Within the Same Context

From back to front:

context root element
positioned elements (and their children) with negative z-index values
non-positioned elements
positioned elements (and their children) with a z-index value of auto
positioned elements (and their children) with positive z-index values

The ordered is always as appearance in the HTML.

z-index

By kenjiru

z-index

429

kenjiru

kenjiru.ro