z-index如何使用其默认值? [英] How does z-index work with its default values?

问题描述

谁能解释一下此代码段中z-index默认值的工作原理

can anyone explain how z-index default value works in this snippet

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排在首位

I expected sub ul to be on the top

但是我不知道顶层的文本如何包裹在底层的文本上?

but I don't know how text from top level wrapped over text from lower level ?

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

I can notice sub ul [red one] on the top and it can hide the top level border

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

So I expected that ul here working like container so every child element will follow it

我知道是否要给它z-index:1

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

推荐答案

这全部与绘画顺序有关.首先，我们添加一个 top 值以更好地了解发生了什么:

It's all about paiting order. First let's add a top value to better see what is happening:

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个元素下方的方式.如果我们检查与绘画顺序相关的规范，我们可以阅读以下内容:

Note how the red element is above the first 3 elements and below the last 3 elements. If we check the specification related to the painting order we can read the following:

1. 以树顺序的所有定位，不透明或变换后代，属于以下类别:

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

1. 所有定位的后代，其"z索引:自动"或"z索引:0"以树顺序排列.对于具有'z-index:auto'的用户，将其视为已创建新的堆栈上下文的元素，，但应将所有定位的后代和实际创建新堆栈上下文的后代视为一部分父堆栈上下文，而不是这个新容器.

1. 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 ，因此所有元素都属于同一堆叠上下文，我们将按照树的顺序对其进行绘制.

The main trick is here. All your elements are positionned and no one has z-index specified so all will belong to the same stacking context and we will follow the tree order to paint them.

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

Following this logic we will have this order:

1. 第 first 类的 ul (绿色框)
2. ul.first
中的前三个 li
3. 类为 foo 的 ul (红色框)
4. ul.foo
中的所有 li
5. ul.first
中的最后3个 li

1. the ul with class first (the green box)
2. the first 3 li inside ul.first
3. the ul with class foo (the red box)
4. all the li inside ul.foo
5. the last 3 li inside ul.first

添加 z-index 会更改顺序，还会创建一些堆栈上下文.

Adding a z-index will change the order and will also create some stacking context.

z-index:0 将创建一个堆栈上下文，但是将不起作用，因为我们已经在其后立即绘制了其中的所有元素.

z-index:0 on ul.foo will create a stacking context but will have no effect since we are already painting all the elements inside it right after it.

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

z-index > 0 on ul.foo will move it to the top of everything since it will get painting at the step (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<ul.foo 上的0 会将其移至所有内容的底部，因为它将在步骤(3)上进行绘制

z-index < 0 on ul.foo will move it to the bottom of everything since it will get painting at the step (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<与 ul.first 上的 auto 不同的 ul.foo 和 z-index 上的0 首先绘制绿色框，然后绘制 ul.foo ，然后绘制 ul.first

z-index < 0 on ul.foo and z-index different from auto on ul.first will first paint the green box then ul.foo then all the li inside 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>

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

Related question to get more details:

为什么具有z-index值的元素无法覆盖其子级?

这篇关于z-index如何使用其默认值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！