Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't an element with a z-index value cover its child?

Today after hours of debugging, I learned this rule the hard way:

A parent element is never able to cover (stack on top of) its child element if the parent has a z-index of any value, no matter how you change the child's CSS

How can I understand this behavior by logic? Is it in the specs?

.container {   width: 600px;   height: 600px;   background-color: salmon;   position: relative;   z-index: 99;   padding-top: 10px; }  h1 {   background-color: pink;   position: relative;   z-index: -1;   font-family: monospace; }
<div class="container">   <h1>1. I can never be covered by parent if my z-index is positive.</h1>   <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1> </div>

Negative z-index child above parent element

like image 703
ZYinMD Avatar asked Feb 27 '19 04:02

ZYinMD


People also ask

Does Z-index affect children?

Once you give the parent a z-index value then all the z-index values for its children will be relative to the parent's z-index value.

Do child elements inherit Z-index?

No, it isn't inherited.

Does Z-index place the element behind its parent?

The z-index of elements inside of a stacking context are always relative to the parent's current order in its own stacking context. The <html> element is a stacking context itself and nothing can ever go behind it.

Why Z-Index property is not working?

z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.

Why do we need a negative z-index value for child elements?

A child element is ALWAYS getting a stacking context based on its parent. Hence the need for a negative z-index value to push the child "behind" its parent (0) stacking context.

Why can't a parent element cover its child element?

A parent element is never able to cover (stack on top of) its child element if the parent has a z-index of any value, no matter how you change the child's CSS.

Can a parent element cover a child element with z-index?

Show activity on this post. A parent element is never able to cover (stack on top of) its child element if the parent has a z-index of any value, no matter how you change the child's CSS How can I understand this behavior by logic?

Can a parent element stack on top of its child element?

A parent element is never able to cover (stack on top of) its child element if the parent has a z-index of any value, no matter how you change the child's CSS How can I understand this behavior by logic? Is it in the specs?


2 Answers

There are two important things you need to know: the painting order and the stacking context. If you refer to the specification, you can find how and when elements are painted.

  1. Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order.

  1. All positioned, opacity or transform descendants, in tree order that fall into the following categories:
  1. All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

  1. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order.

It's clear from this that we first paint elements with negative z-index at step (3), then the one with z-index equal to 0 at step (8), and finally the ones with positive z-index at step (9), which is logical. We can also read in another part of the specification:

Each box belongs to one stacking context. Each box in a given stacking context has an integer stack level, which is its position on the z-axis relative to other boxes in the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked bottom-to-top according to document tree order.

Also

An element that establishes a local stacking context generates a box that has two stack levels: one for the stacking context it creates (always 0) and one for the stacking context to which it belongs (given by the z-index property).


To understand when each element will be painted you need to know its stacking context and its stack level inside this stacking context (defined by z-index). You also need to know whether that element establishes a stacking context. This is the tricky part, because setting z-index will do this:

For a positioned box, the z-index property specifies:

  1. The stack level of the box in the current stacking context.
  2. Whether the box establishes a stacking context

Values have the following meanings:

<integer>

This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.

auto

The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.


Now we have all the information to better understand each case. If the parent element has a z-index value of something other than auto, then it will create a stacking context, thus the child element will be painted inside whatever their z-index is (negative or positive). The z-index of the child element will simply tell us the order of painting inside the parent element (this covers your second point).

Now, if only the child element has a positive z-index and we set nothing on the parent element, then considering the painting order, the child will be painted later (in step (9)) and the parent in step (8). The only logical way to paint the parent above is to increase the z-index, but doing this will make us fall into the previous case where the parent will establish a stacking context and the child element will belong to it.

There is no way to have the parent above a child element when setting a positive z-index to the child. Also there is no way to have the parent above the child if we set a z-index to the parent element different from auto (either positive or negative).1

The only case where we can have a child below its parent is to set a negative z-index on the child element and keep the parent at z-index: auto, thus this one will not create a stacking context and following the painting order the child will be painted first.


In addition to z-index, there are other properties that create a stacking context. In case you face an expected stacking order, you need to consider those properties, too, in order to see if there is a stacking context created.


Some important facts that we can conclude from the above:

  1. Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
  2. Each stacking context is completely independent of its siblings: only descendant elements are considered when stacking is processed.
  3. Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. ref

1: there is some hacky ways if we consider the use of 3D transformation.

Example with an element going under its parent element even if this one has a z-index specified.

.box {   position:relative;   z-index:0;   height:80px;   background:blue;   transform-style: preserve-3d; /* This is important */ } .box > div {   margin:0 50px;   height:100px;   background:red;    z-index:-1; /* this will do nothing */   transform:translateZ(-1px); /* this will do the magic */ }
<div class="box">   <div></div> </div>

Another example where we can place an element between two elements in another stacking context:

.box {   position: relative;   transform-style: preserve-3d;   z-index: 0;   height: 80px;   background: blue; }  .box>div {   margin: 0 50px;   height: 100px;   background: red;   z-index: 5;   transform: translateZ(2px); }  .outside {   height: 50px;   background: green;   margin: -10px 40px;   transform: translateZ(1px); }  body {   transform-style: preserve-3d; }
<div class="box">   <div></div> </div>  <div class="outside"></div>

We can also have some crazy stacking order like below:

.box {   width: 100px;   height: 100px;   position: absolute; }  body {   transform-style: preserve-3d; }
<div class="box" style="top:100px;left:50px;background:red;"></div> <div class="box" style="top: 50px;left: 115px;background:blue;"></div> <div class="box" style="top: 101px;left: 170px;background:green;"></div> <div class="box" style="top: 175px;left: 115px;background:purple;transform: rotateY(-1deg);"></div>

CSS circular stacking context

We should note that using such hack may have some side effect due to the fact that transform-style, perspective and transform will affect position:absolute/fixed element. Related: Why does applying a CSS-Filter on the parent break the child positioning?

like image 107
Temani Afif Avatar answered Sep 21 '22 07:09

Temani Afif


A good way to think about this is that each parent contains its own stacking context. Sibling elements share a parent's stacking order and may, therefore, overlap each other.

A child element is ALWAYS getting a stacking context based on its parent. Hence the need for a negative z-index value to push the child "behind" its parent (0) stacking context.

The only way to remove an element from its parent's context is using position: fixed since this essentially forces it to use the window for context.

like image 23
Bryce Howitson Avatar answered Sep 20 '22 07:09

Bryce Howitson