Question

我有一个容器<div>，它有一个插入阴影。在其中，我有另一个<div>，一个高度为100％且它自己为background-color 阴影虽然在容器内的空白区域正常工作，但在另一个<div>所在的位置根本不起作用。

.main_body {
    width: 103%;
    position: relative;
    left: -20px;
    height: 300px;
    -webkit-box-shadow:inset 0 0 8px 3px #8C8C8C;
    box-shadow:inset 0 0 8px 3px #8C8C8C;
    background-color: #F0F0F0;
    overflow: hidden;
    z-index: 20000;
}

div#mainContainer {
    height: 100%;
    background-color: darkblue;
    width: 85%;
    position: absolute;
    left: 11px;
    z-index: -20;
}

<div class="main_body"><!--The container, outer DIV-->
   <div id="mainContainer"><!--the inner DIV-->
   </div>
</div>

^ 我相信你看得更漂亮，但我尽可能简化了它，以便更容易理解。

无论如何，我已经尝试了从z-index到position: relative的所有内容，并且已经到处搜索，但无法找到解决方法。有什么想法吗？

Answer 1

简单的答案是你不能。子元素将始终位于box-shadow

之上

作为一种解决方法，你可以使用伪元素......

＆＃13;

.main_body {
    width: 103%;
    position: relative;
    left: -20px;
    height: 300px;
    background-color: #F0F0F0;
    overflow: hidden;
    z-index: 20000;
    color: #FFF;
}

div#mainContainer {
    height: 100%;
    background-color: darkblue;
    width: 85%;
    position: absolute;
    left: 11px;
    z-index: -20;
}

.main_body:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-box-shadow:inset 0 0 8px 3px #8C8C8C;
    box-shadow:inset 0 0 8px 3px #8C8C8C;
    pointer-events: none; /* required to allow interaction with elements behind - All proper browsers and IE11+ */
}

＆＃13;

<div class="main_body"><!--The container, outer DIV-->
   <div id="mainContainer"><!--the inner DIV-->
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet dolor est. Ut mattis nisl at ipsum pulvinar ultricies. Phasellus rutrum sem neque, eu auctor orci tristique eu. Sed quis felis ligula. Phasellus id molestie libero. Nullam vel nibh eu nisi iaculis viverra nec et nisl. Donec vitae maximus ante.
   </div>
</div>

＆＃13;

Answer 2

从background-color移除z-index和.main_body。

如果.main_body需要背景，那么您必须添加另一个div才能达到预期效果。

如何正确地在DIV上放置一个插入阴影，这也会覆盖它内部的DIV？

2 个答案: