时间戳

首页 > 解决方案 > z-index 如何使用其默认值？

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

问题描述

谁能解释这个片段中 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

将解决它，但如果可能的话，我希望了解这里的情况

标签： csscss-positionz-index

解决方案

这一切都是关于绘画顺序。首先让我们添加一个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 个元素之下。如果我们检查与绘画顺序相关的规范，我们可以阅读以下内容：

  1. 所有定位、不透明度或变换后代，按树顺序分为以下几类：
    1. 所有具有“z-index：auto”或“z-index：0”的定位后代，按树顺序排列。对于那些具有'z-index: auto'的元素，将元素视为它创建了一个新的堆叠上下文，但是任何定位的后代和实际创建新堆叠上下文的后代都应该被视为父堆叠上下文的一部分，而不是这个新的.

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

按照这个逻辑，我们将有这个顺序：

  1. ulwith 类（first绿色框）
  2. 前3个li里面ul.first
  3. ulwith 类（foo红色框）
  4. 所有的li里面ul.foo
  5. li里面的最后 3 个ul.first

添加 az-index会改变顺序并且还会创建一些堆叠上下文。

z-index:0onul.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 > 0onul.foo会将其移至所有内容的顶部，因为它将在步骤 (9) 中进行绘制

  1. 由 z-index 大于或等于 1 的定位后代形成的堆叠上下文，按 z-index 顺序（最小优先）然后是树顺序。

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 < 0onul.foo会将其移至所有内容的底部，因为它将在步骤 (3) 中进行绘制

  1. 由具有负 z 索引（不包括 0）的定位后代形成的堆叠上下文，按 z 索引顺序（最负值在前）然后是树顺序。

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 < 0onul.foo和onz-index不同将首先绘制绿色框，然后再绘制所有内部autoul.firstul.fooliul.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 值的元素不能覆盖其子元素？

推荐阅读