Question

此示例看起来不像菜单，但应可视化该问题：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      font: normal 16px/1.5 "Helvetica Neue", sans-serif;
      padding-top: 50px;
    }
    
    .menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(52, 59, 62, .9);
    }
    
    .box {
      font-size: 2.5rem;
      width: 100px;
      line-height: 100px;
      text-align: center;
    }
    
    .menu .box {
      margin: 20px auto;
    }
    
    .main {
      display: flex;
      justify-content: center;
      max-width: 600px;
      margin: 0 auto;
      border: 1px solid #ccc;
      padding: 20px 0;
    }
    
    .main .box:first-of-type {
      margin-right: 10px;
    }
    
    button {
      display: block;
      position: relative;
      z-index: 1;
      cursor: pointer;
      padding: 5px;
      margin: 50px auto;
      max-width: 150px;
      font-size: 1.1rem;
    }
    
    .green {
      background: green;
      z-index: 100;
    }
    
    .yellow {
      background: yellow;
    }
    
    .yellow_2 {
      background: yellow;
      z-index: 1000;
    }
    
    .red {
      background: red;
    }
    
    .green_2 {
      background: green;
      z-index: -100;
    }
  </style>
</head>

<body>
  <div class="menu">
    <div class="box yellow">1.1</div>
    <div class="box yellow_2">1.2</div>
  </div>

  <div class="main">
    <div class="box red">2</div>
    <div class="box green">3</div>
  </div>
  <div class="main">
    <div class="box red">4</div>
    <div class="box green_2">5</div>
  </div>

</body>

</html>

我尝试在所有框之前显示框1.2（.yellow_2），但将框1.1（.yellow）保持在框2、3、4和5之间。由于父div没有分配z索引，这里可能有什么问题？如何将子div彼此定位在不同的父母div中？

Answer 1

z-index属性指的是此三维浏览器幻觉中元素的绘制顺序。默认情况下，所有元素的z索引均为0，浏览器按DOM顺序绘制。但是，z-index实际上可以使我们对绘制元素的时间进行细粒度的控制。通过分配较高的z索引，我们可以使元素绘制的方式与用户“更接近”，而分配较低的z索引（或负数！）使我们可以将元素绘制得更接近画布。

请参阅下面的文章。

https://blog.logrocket.com/how-css-works-creating-layers-with-z-index-6a20afe1550e https://css-tricks.com/almanac/properties/z/z-index/ https://sevenspark.com/diagnosis/z-index-submenu-hidden-behind-content

Answer 2

我正在努力弄清堆栈上下文以及我认为正在发生的事情

“ 3”在其自身的堆叠上下文中，其z-index为100（元素是flex（flexbox）容器的子元素，z-index值为“ auto”以外的其他值。）请参见MDN
div.menu位于其自身的堆叠上下文中（由于position：fixed），其中包括子索引1.1和1.2，且z-index为0
'2'，'4'，'5'是未定位的块，因此出现在定位的块的下方

因此，我认为您无法在3之上获得1.2（没有1.1），因为它们处于单独的堆栈上下文中。如果将.menu的z-index更改为101，则1.1和1.2都将显示在3上方。

我希望这对您有帮助

Answer 3

诀窍是保持父div不变，将其默认设置为position：static，并为所有子div分配任何位置属性BUT position：static，以使z-index值生效。父级z索引具有优先级，但是在分配静态位置属性时会被忽略。希望我做对了，对别人有帮助。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  padding-top: 50px;
}

.menu{
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 59, 62, .9);
}

.box {
  font-size: 2.5rem;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.menu .box {
  margin: 20px auto;
}

.main {
  display: flex;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px 0;
}

.main .box:first-of-type {
  margin-right: 10px;
}

button {
  display: block;
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 5px;
  margin: 50px auto;
  max-width: 150px;
  font-size: 1.1rem;
}



.yellow {
  position:fixed;
  background: yellow;
  width:10%;
    top:150px;
  left:45%;
}

.yellow_2 {
  position:fixed;
  background: yellow;
  z-index:1000;
  width:10%;
  top:0;
  left:45%;
}
.green {
  background: green;
  z-index:100;
}

.red {
  background: red;
}

.green_2 {
  background: green;
  z-index:-100;
}
</style>
</head>
<body>
<div class="menu">
    <div class="box yellow">1.1</div>
    <div class="box yellow_2">1.2</div>
</div>

<div class="main">
    <div class="box red">2</div>
    <div class="box green">3</div>
</div>
<div class="main">
    <div class="box red">4</div>
    <div class="box green_2">5</div>
</div>

</body>
</html>

固定菜单的不同z索引存在问题：如何对不同父母的孩子div进行分层

3 个答案: