固定菜单的不同 z-index 问题：如何对不同父项的子 div 进行分层

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-indexes，这里有什么问题？如何将子 div 放置在不同的父 div 中？

Answer 1

z-index 属性指的是元素在这个三维浏览器错觉中的绘制顺序。默认情况下，所有元素的 z-index 均为 0，浏览器按 DOM 顺序绘制。然而，z-index 实际上让我们可以细粒度地控制元素何时被绘制。通过分配更高的 z-index，我们可以使元素以这样的方式绘制，使其“更接近”用户，而分配更低（或负数！）z-index 则让我们将元素绘制得更接近 canvas.

请参考以下文章。

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）容器的 child，z-index 值不是 "auto".) 参见 MDN
div.menu 在它自己的堆栈上下文中（因为 position:fixed），这包括 children 1.1 和 1.2，其中 z-index 为 0
'2'、'4'、'5' 是 non-positioned 个方块，因此出现在定位方块下方

因此，我认为您无法在 3（没有 1.1）的基础上获得 1.2，因为它们处于不同的堆叠上下文中。如果把.menu的z-index改成101，1.1和1.2都会出现在3上面

希望对您有所帮助

Answer 3

诀窍是让父 div 保持原样，默认为 position:static，并为所有子 div 分配任何位置属性但 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-index 问题：如何对不同父项的子 div 进行分层

Issue with different z-indexes of fixed menu: How to layer child divs of different parents

html

css

z-index