css - 使用绝对定位覆盖所有包含的 div 的框阴影

Question

这是一个引用 http://cssdesk.com/rHWcz

我想要做的是将其中一个 div 包含在框阴影下。我认为使用绝对定位可能会给我带来一些问题，但它必须是绝对定位的。 哪一个都没有关系，但其中一个框 div 不能位于框阴影之上。 有什么想法吗？

Answer 1

为了解决这个问题，您可能需要解决一些问题。首先是您的 HTML 不明确/格式不正确:

<div class="out"><div class="left">
</div>
<div class="right"></div>

我的假设是你真正的意思是:

<div class="out">
 <div class="left"></div>
 <div class="right"></div>
</div>

(你错过了结束语 </div> )

有了这个修复，最简单的解决方案实际上是将阴影拉出底层标签(.out div)，而是将阴影创建为覆盖.

例子:

<div class="out">
 <div class="left"></div>
 <div class="right"></div>
 <div class="shadow"></div>
</div>

完成后，您可以轻松放置 .left和 .right <div>你想要的元素，然后强制 .shadow div显示在顶部。

考虑以下 CSS(我还对您的 CSS 进行了一些标准化以减少重复):

.out, .shadow {
  height: 600px; width: 600px;
}
.out {
  background-color: AliceBlue;
  position: relative;
}
.shadow {
  background: transparent;
  -webkit-box-shadow: inset 0px 0px 5px 5px ;
  box-shadow: inset 0px 0px 5px 5px;
  position: absolute; top: 0; left: 0;
}
.left, .right {
  height: 100px; width: 100px;
  bottom: 0;
  position: absolute;
}
.left {
  background-color: green;
  left: 0; 
}
.right {
  background-color: red;
  right: 0;
}

因为 .shadow div出现在最后，你不需要任何特殊的z-order为了让它出现在顶部。

Here is a working cssdesk在行动中证明它。

编辑:

如评论中所述 - 原始问题实际上只要求两个框之一出现在 box-shadow 下.如果您希望其中一个出现在上方，只需移动该框的 HTML 标记，使其出现在 .shadow 之后。 <div> ，像这样:

<div class="out">
 <div class="left"></div>
 <div class="shadow"></div>
 <div class="right"></div>
</div>

这将导致 .right框(红色的)出现在阴影上方，而不是下方 - 不需要任何 z-index下流。

我已经更新了 cssdesk 示例来显示这个版本。