3

Here's a reference http://cssdesk.com/rHWcz

What I'm trying to do is have one of the div's contained be under the box shadow. I think using absolute positioning might be giving me some problems, but it has to be absolute positioned. It doesn't matter which one, but one of the box div's cannot lay on top of the box shadow. Any ideas?

4

4 回答 4

3

为了解决这个问题，您可能需要解决一些问题。首先是您的 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>）

修复此问题后，最简单的解决方案实际上是将阴影从底层标记 (the .out div) 中拉出，而是将阴影创建为覆盖。

例子：

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

完成此操作后，您可以轻松地将.leftand.right <div>元素放置在您想要的位置，然后强制.shadow div出现在 top 上。

考虑以下 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的东西就可以让它出现在顶部。

这是一个工作 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 示例以显示此版本。

于 2013-04-24T18:03:37.820 回答
0

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 来显示或隐藏它们。

于 2013-04-24T18:06:33.880 回答
0 
.left, .right {
  z-index: -1;
}

但是，您必须将背景颜色删除.out。没有办法在另一个盒子阴影和背景之间放置一个元素。

于 2013-04-24T17:51:03.863 回答
0

另一种选择是创建另一个元素，容器的高度和宽度，并将其定位到绝对的左上角。

你可以在这里看到一个例子

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

您会遇到无法单击带有框阴影的定位元素下方的任何内容的问题。解决此问题的一种方法是在用户悬停时将其隐藏。

于 2013-04-24T17:58:14.580 回答