CSS - 使用绝对定位

Question

这里有一个参考http://cssdesk.com/rHWcz

我试图做的是有div的一个是包含在盒子眼影盒阴影覆盖了所有包含的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>）

有了这个固定，最简单的解决方案实际上是将潜在标记（.outdiv）的取出，并改为将影子创建为覆盖。

例子：

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

有了这个做，你可以很容易地放置在要他们.left和.right<div>元素，然后迫使.shadowdiv到顶部出现。

考虑下面的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; 
} 

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

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

编辑：

正如在评论中提到 - 原来问题实际上询问只有两个盒子中的一个出现的box-shadow下。如果你想他们中的一个出现以上它，只需使其显示后的.shadow<div>移动这个盒子的HTML标签，就像这样：

<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%; 

你会遇到与不能够点击定位元素下方的任何内容与箱阴影的问题。解决这个问题的方法是在用户悬停时隐藏它。

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; 
} 

DEMO

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

说明

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