当身体模糊时，我如何在身体上显示元素？

Question

我有一个问题，我试图在模糊的身体上显示div，但我无法让它真正起作用。我已经尝试将z-index添加到div但它似乎没有工作。

这是我尝试过的：

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: black;
    color: white;
    border: none;
    cursor: default;
    filter: blur(11px);
}

#foo {
  z-index: 10;
}

<div id="foo">
  Random Text
</div>

Answer 1

由于您已经模糊了父母，所有后代也会模糊。要达到类似的效果，您必须：

• 创造和模糊div，比如#bar，它将成为#foo的兄弟姐妹。
• 给#foo一个比z-index更高的#bar并确保它的位置（而不是position: static）。

例：

/* ----- CSS ----- */
body {
  padding: 0;
  margin: 0;
}

#bar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  background: black;
  color: white;
  border: none;
  cursor: default;
  filter: blur(11px);
  z-index: 0;
}


#foo {
  color: red;
  position: relative;
  z-index: 10;
}

<!----- HTML ----->
<div id="bar"></div>
<div id="foo">
  Random Text
</div>

Answer 2

你总是需要为你的positioned选择器定义一个z-index

Answer 3

随机文本是黑色的，就像身体背景一样，你应该将身体z-index定义为低于#foo。希望这有助于:)