Why is z-index ignored with position:static?

Question

See this comment from jquery-ui

// Ignore z-index if position is set to a value where z-index is ignored by the browser
// This makes behavior of this functi         


        

Answer 1

z-index is not ignored for flex-items (immediate children of flex-container, element with display: flex or display: inline-flex) or grid-items (immediate children of grid-container, element with display: grid or display: inline-grid).

Specs quotation

From W3C Flexbox specs:

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.

From W3C CSS Grid Layout specs:

Grid items can overlap when they are positioned into intersecting grid areas, or even when positioned in non-intersecting areas because of negative margins or positioning. The painting order of grid items is 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 (behaving exactly as if position were relative). Thus the z-index property can easily be used to control the z-axis order of grid items.

Flexbox example

So assume we have this layout with overlapping (.flex-item-two overlaps .flex-item-one using e.g. negative margins):

.flex {
  display: flex;
  align-items: center;
}

.flex-item-one {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: -50px;
}

.flex-item-two {
  width: 200px;
  height: 200px;
  background-color: green;
}

<div class="flex">
  <div class="flex-item flex-item-one">One</div>
  <div class="flex-item flex-item-two">Two</div>
</div>

If flex-item-one index is bigger than .flex-item-two's, .flex-item-one then overlaps .flex-item-two.

.flex {
  display: flex;
  align-items: center;
}

.flex-item-one {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: -50px;
  z-index: 1;
}

.flex-item-two {
  width: 200px;
  height: 200px;
  background-color: green;
}

<div class="flex">
  <div class="flex-item flex-item-one">One</div>
  <div class="flex-item flex-item-two">Two</div>
</div>

CSS Grid example

#grid {
  display: inline-grid;
  width: 250px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr
}

#A {
  grid-column: 1 / span 2;
  grid-row: 2;
  align-self: end;
  background-color: #4f81bd;
}

#B {
  grid-column: 1;
  grid-row: 1;
  z-index: 10;
  background-color: #8064a2;
}

#C {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-left: -20px;
  background-color: #f79646;
}

#D {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  background-color: #9bbb59;
}

#E {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  z-index: 5;
  justify-self: center;
  align-self: center;
  background-color: #c0504d;
}

#grid > * {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  font-size: 32px;
}

#C, #D {
  padding: 10px 20px;
}

<div id="grid">
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
</div>

Answer 2

Because position: static means "Ignore all the positioning instructions from left, top, z-index, etc.".

'z-index'
Value:      auto | <integer> | inherit
Initial:    auto
Applies to:     positioned elements

— http://www.w3.org/TR/CSS21/visuren.html#z-index

An element is said to be positioned if its 'position' property has a value other than 'static'.

— http://www.w3.org/TR/CSS21/visuren.html#positioned-element