z-index 如何使用其默认值？

Question

任何人都可以解释一下 z-index 默认值在此代码段中的工作原理

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 150px;
}

li {
  position: relative;
}
li ul {
  position: absolute;
  background: green;
  left: 20%;
  border: 1px solid;
}

.foo {
  background: red;
}

<ul >
  <li>
    <a href="">main element</a>
    <ul  class="first">
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
        <ul class="foo">
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
        </ul>
      </li>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
    </ul>
  </li>
</ul>

我希望 sub ul 位于顶部

但我不知道来自顶层的文本如何覆盖来自较低层的文本？

我可以注意到顶部的 sub ul [red one] 它可以隐藏顶级边框

所以我希望 ul 在这里像容器一样工作，所以每个子元素都会跟随它

我知道如果我给它 z-index:1

会解决，但希望能了解这里的情况

Answer 1

一切都与绘画顺序有关。首先让我们添加一个 top 值以更好地查看发生了什么：

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 150px;
}

li {
  position: relative;
}
li ul {
  position: absolute;
  background: green;
  left: 20%;
  top:-20%;
  border: 1px solid;
}

.foo {
  background: red;
}
a {
  font-size:20px;
  color:#fff;
}

<ul >
  <li>
    <a href="">main element</a>
    <ul  class="first">
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
        <ul class="foo">
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
        </ul>
      </li>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
    </ul>
  </li>
</ul>

注意红色元素是如何在前 3 个元素之上和在后 3 个元素之下的。如果我们检查与 the painting order 相关的规范，我们可以阅读以下内容：

All positioned, opacity or transform descendants, in tree order that fall into the following categories:

All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order. For those with 'z-index: auto', treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one.

主要技巧就在这里。您所有的元素都已定位，没有人指定 z-index，因此所有元素都属于同一个堆叠上下文，我们将按照树顺序绘制它们。

按照这个逻辑，我们将得到这个订单：

ul 和 class first（绿框）
ul.first里面的前3个li
ul和classfoo（红框）
ul.foo里面的所有li
最后3个li里面ul.first

添加 z-index 将更改顺序并创建一些堆叠上下文。

z-index:0 on ul.foo 将创建一个堆叠上下文，但不会有任何效果，因为我们已经在它后面绘制了其中的所有元素。

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 150px;
}

li {
  position: relative;
}
li ul {
  position: absolute;
  background: green;
  left: 20%;
  top:-20%;
  border: 1px solid;
}

.foo {
  background: red;
  z-index:0;
}
a {
  font-size:20px;
  color:#fff;
}

<ul >
  <li>
    <a href="">main element</a>
    <ul  class="first">
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
        <ul class="foo">
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
        </ul>
      </li>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
    </ul>
  </li>
</ul>

z-index > 0 on ul.foo 会将其移动到所有内容的顶部，因为它将在步骤 (9)

中绘制

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

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 150px;
}

li {
  position: relative;
}
li ul {
  position: absolute;
  background: green;
  left: 20%;
  top:-20%;
  border: 1px solid;
}

.foo {
  background: red;
  z-index:2;
}
a {
  font-size:20px;
  color:#fff;
}

<ul >
  <li>
    <a href="">main element</a>
    <ul  class="first">
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
        <ul class="foo">
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
        </ul>
      </li>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
    </ul>
  </li>
</ul>

z-index < 0 on ul.foo 会将其移动到所有内容的底部，因为它将在步骤 (3)

中绘制

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

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 150px;
}

li {
  position: relative;
}
li ul {
  position: absolute;
  background: green;
  left: 20%;
  top:-20%;
  border: 1px solid;
}

.foo {
  background: red;
  z-index:-2;
}
a {
  font-size:20px;
  color:#fff;
}

<ul >
  <li>
    <a href="">main element</a>
    <ul  class="first">
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
        <ul class="foo">
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
        </ul>
      </li>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
    </ul>
  </li>
</ul>

z-index < 0 on ul.foo 和 z-index 不同于 auto on ul.first 将首先绘制绿色框然后 ul.foo 然后所有li 里面 ul.first

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 150px;
}

li {
  position: relative;
}
li ul {
  position: absolute;
  background: green;
  left: 20%;
  top:-20%;
  border: 1px solid;
  z-index:0;
}

.foo {
  background: red;
  z-index:-2;
}
a {
  font-size:20px;
  color:#fff;
}

<ul >
  <li>
    <a href="">main element</a>
    <ul  class="first">
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
        <ul class="foo">
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
          <li class="secound"><a href="">Secound Level</a></li>
        </ul>
      </li>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
      <li><a href="">First level</a>
    </ul>
  </li>
</ul>

相关问题以获取更多详细信息：

z-index 如何使用其默认值？

How does z-index work with its default values?

css

z-index

css-position