子元素的z-index高于父级div的z-index

Question

我有一个父div，它的位置是固定的。我试图做的是在页面模糊时突出显示子div1，但整个父div都会突出显示。在阅读了很多帖子之后，发现父div会覆盖z-index，而子元素的z-index没有意义，所以我卡在这里不知道如何解决。

如果无法解决此问题，是否有人可以帮我找到解决方案？

- Rohit

---

查看这个问题 https://dev59.com/n3A65IYBdhLWcg3wzyL8 - Alexander Taran

谢谢链接，Alexander。 - Rohit

为什么你尝试使用z-index操作，也许可以尝试使用opacity。如果我理解正确了你的问题，这样做会起作用。 - Szymon

嗨，Szymon.. 我也试过了，但是似乎不是我想要的那种工作方式。 - Rohit

Answer 1

当你不实际包含父元素中的预期子元素时，而是在保持DOM布局平坦的同时视觉上伪造层次结构，这是很容易实现的。下面是一个示例：

HTML：http://jsfiddle.net/4KLRU/1/

<div id="container">
    <div class="child">Something</div>
    <div class="child behind_parent">Something else</div>
    <div class="child">Something else entirely</div>
    <div id="parent"></div>
</div>

请注意，父元素实际上并不包围所谓的子元素。

CSS:

#container {
    position: fixed;
    padding: 10px;
}

#parent {
    background: orange;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.child {
    position: relative;
    background: red;
    margin: 5px;
    z-index: 2;
}

.behind_parent {
    z-index: 0;   
}

- Etheryte

Answer 2

没有确切了解你的标记语言是什么，你可以尝试以下方法：

#parent {
  position: fixed;
  ...
}

#child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  ...
}

- WynandB