Question

我要做的是将其中一个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 （.out div），而是将阴影创建为< EM>覆盖

示例：

<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示例以显示此版本。

Answer 2

.left, .right {
  z-index: -1;
}

但您必须将背景颜色移除到.out。无法在其他框阴影和背景之间放置元素。

Answer 3

另一种方法是创建容器高度和宽度的另一个元素，并用绝对值将其放在左上角。

您可以看到example here

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

您遇到的问题是无法使用box-shadow点击定位元素下方的任何内容。解决这个问题的方法是在用户盘旋时隐藏它。

Answer 4

<强> HTML

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

<强> CSS

.wrapper {
    position: relative;
    width:600px;
    height:600px
}
.out {
    width:600px;
    height:600px;
    background-color:aliceblue;
    position:relative;
    -webkit-box-shadow: inset 0px 0px 5px 5px ;
    box-shadow: inset 0px 0px 5px 5px;
    z-index: 2;
}  
.left {
    width:100px;
    height:100px;
    background-color:green;left:0; bottom:0;
    position:absolute;
    z-index: 1;
}
.right {
      width:100px;
      height:100px;
      background-color:red;right:0; bottom:0;
      position:absolute;
      z-index:4;
}

<强>样本

http://jsfiddle.net/sqJyw/4/

<强>说明

我添加了包含你内容的div，操纵你的samll div的z-index来显示或隐藏它们。

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

4 个答案: