z-index默认值如何工作？

问题描述 投票：1回答：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%;
  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

将解决此问题，但我希望能在这里了解情况

css css-position z-index
1个回答
3
投票

全部是关于绘画顺序。首先，我们添加一个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>

请注意红色元素在前三个元素上方和后三个元素下方的方式。如果我们检查与the painting order相关的规格，我们可以阅读以下内容：

  1. 所有已定位，不透明或转换后代，以树顺序分为以下类别：
    1. 所有定位为'z-index：auto'或'z-index：0'的后代，以树顺序排列。对于具有'z-index：auto'的元素，将其视为已创建新的堆栈上下文，但是任何定位的后代和实际创建新堆栈上下文的后代均应视为父级堆栈的一部分上下文，而不是这个新的。

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

按照此逻辑，我们将具有以下顺序：

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

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

z-index:0上的[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上的[ul.foo会将其移至所有内容的顶部，因为它将在步骤（9）上进行绘制]

  1. 由z索引大于或等于1的定位后代以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 < 0上的[ul.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 < 0上的[ul.foo和与z-index上的auto不同的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>

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.