Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does z-index specify the stack level of a non-positioned flex item?

Tags:

In CSS 2.1, z-index only applies to positioned elements, and specifies two different things:

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

But Flexbox says this:

Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

Then, unlike CSS2.1, setting z-index to some integer on a non-positioned flex item creates a stacking context.

However, I don't see defined anywhere which should be the stack level of this stacking context.

A similar case is opacity, which can also create establish stacking contexts on non-positioned elements. But in this case the stack level is properly specified to be 0:

If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with z-index: 0 and opacity: 1.

In my opinion these options are reasonable:

  • The stack level is the value specified in z-index
  • The stack level is 0
  • The flex item wraps its descendants in a stacking context so that they are painted together, but the flex item itself is painted as a normal in-flow non-positioned elements (as if it didn't establish an stacking context).

According to the following test, both Firefox and Chrome do the first option.

.container {    display: flex;    padding-left: 20px;  }  .item {    padding: 20px;    background: #ffa;    align-self: flex-start;    margin-left: -20px;  }  .item:nth-child(even) {    background: #aff;    margin-top: 40px;  }  .za::after{ content: 'z-index: auto'; }  .z0 { z-index: 0; } .z0::after{ content: 'z-index: 0'; }  .z1 { z-index: 1; } .z1::after{ content: 'z-index: 1'; }  .z-1 { z-index: -1; } .z-1::after{ content: 'z-index: -1'; }
<div class="container">    <div class="item z1"></div>    <div class="item z0"></div>    <div class="item za"></div>    <div class="item za"></div>    <div class="item z-1"></div>  </div>

Is this behavior defined somewhere?

like image 219
Oriol Avatar asked Jan 02 '16 18:01

Oriol


People also ask

Does Z Index work with Flex?

The z-index property only effects elements that have a position value other than static (the default) or are flex items (direct children of display: flex or display: inline-flex ).

Does Z Index work without position?

In order for z-index to have any effect at all, it needs to be applied to a positioned element, that means, an element with position relative , absolute , fixed , or sticky . If you don't apply a z-index , the elements will be stacked in the order they are written in the HTML.

What is the Z Index What is the stacking context?

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.

Does Z Index work with position relative?

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).


1 Answers

CSS Working Group:

The CSSWG couldn't think of a good reason to make flex items establish pseudo-stacking contexts, so we have resolved to treat them the same way as block and table cell elements.

source: https://lists.w3.org/Archives/Public/www-style/2012Jul/0382.html

More information:

  • [css3-flexbox] Painting order
  • [css3-flexbox] Paint flex items atomically?
  • [css3-positioning] z-index and pseudo-stacking contexts
  • [css3-flexbox][css-ALL] Should z-index Just Work on flex items?

Also, although not a direct answer to the question, the following W3C Editor's Drafts provide strong hints as to where CSS is going with z-index and stacking contexts.

11. Layered presentation ~ CSS Positioned Layout Module Level 3

12. Detailed stacking context ~ CSS Positioned Layout Module Level 3

4.3. Z-axis Ordering: the z-index property ~ CSS Grid Layout Module Level 1

It's interesting to note that z-index, as currently defined in the CSS Positioned 3 Editor's Draft, applies only to positioned elements. This is no different than CSS 2.1. Yet grid items and flex items can both create stacking contexts with z-index, even when position is static.

like image 55
Michael Benjamin Avatar answered Oct 19 '22 04:10

Michael Benjamin