z-index 对多个项目没有按预期工作

Question

如何让 div 出现在另一个 div 之上，即使它在 HTML 中出现在它之前。

如果您查看下面的示例，我们需要将徽标 div 显示在最前面。

div
{
    height: 200px;
    width: 200px;
    background: #0f0;
}

.parent
{
    position: relative;
    z-index: 1;
}

.child
{
    position: fixed;
    z-index: 2;
    top: 70px; 
    left: 30px;
    background: #f00;
    height: 60px;
}


.child-2
{
    position: inherit;
    z-index: 6;
    top: 10px; 
    left: 30px;
    background: blue;
     height: 60px;
}

<div class="parent">
    header background repeated image
    <div class="child-2">
      logo
    </div>
</div>

<div class="child">
  hero image
</div>

Answer 1

你不需要给其他方块z-index 给logo就可以了

div {
  height: 200px;
  width: 200px;
  background: #0f0;
}

.parent {
  position: relative;
}

.child {
  position: fixed;
  top: 70px;
  left: 30px;
  background: #f00;
  height: 60px;
}

.child-2 {
  position: inherit;
  z-index: 16;
  top: 10px;
  left: 30px;
  background: blue;
  height: 60px;
}

<div class="parent">
  header background repeated image
  <div class="child-2">
    logo
  </div>
</div>

<div class="child">
  hero image
</div>

z-index 对多个项目没有按预期工作

z-index not working as expected for multiple items

html

css

z-index