html - 负边距和 CSS 过滤器

Question

我想在我的网站布局中将一个 div 放在另一个 div 的后面。我不能使用“position:absolute”，所以我使用了负边距。一切顺利，直到我添加了过滤器。

这就是我要放在主要内容后面的带有背景图片的 div。

.tshowcase-background-profile {
    height:300px;
    width:100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
     filter: blur(5px);
     background-image:url('MY IMAGE');
     background-size:cover;
     z-index: -50;
}

如果我删除所有过滤器，它会正常工作。该 div 位于另一个包含内容的 div 下方。但是，只要我对其应用过滤器，它就会与内容一起出现在 div 之上。

我可以在 Google Chrome Inspector 中选中和取消选中过滤行，它确实会从内容下方变为内容上方...等等。

这是为什么？

我需要在背景模糊的内容后面放置一个 div，但不能使用绝对位置。

谢谢

编辑:JSFiddle Example of my issue.尝试删除过滤器，然后单击“运行”，您会看到 Youtube 图标将出现在 DIV 的顶部，如果过滤器打开则在下方。

Answer 1

使用 position: relative 怎么样？

https://jsfiddle.net/3v8a6qmy/