CSS问题：盒阴影和浮动盒的处理

Question

我有两个class名为div1和div2的浮动div。我使用box-shadow在两个div上创建了一个漂亮的阴影。问题是，我希望div1的阴影覆盖在div2上，以便让div2从div1后面伸出来的感觉。但现在，我得到的是div2的阴影覆盖在div1上。希望你能理解我的问题。有没有可能解决这个问题？

<div class="div1"></div>
<div class="div2"></div>

这是CSS代码：

.div1 {
    float: left;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #A0A0A0;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}

.div2 {
    float: left;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #A0A0A0;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}

- Martin

---

不要使用CSS来完成这个任务。相反，应该使用图像和嵌套的div元素来实现。 - Piotr Rochala

Answer 1

你需要为两个元素都设置背景颜色 - 元素默认是透明的，因此会导致它们的阴影相互 "穿插"。要将它们叠加在彼此之上，只需使用 z-index CSS 属性。

.div1 {
    z-index: 99;
}

.div2 {
    z-index: 100;
}

div {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    background-color: white;
    margin-right: 5px;

    -webkit-box-shadow: 0px 0px 80px #A0A0A0;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
    box-shadow: 0px 0px 80px #A0A0A0;
}

请查看： http://www.jsfiddle.net/wspDP/4/

- Yi Jiang

---

这并没有回答问题。我们想要div1在前面显示，z-index对阴影无效。 - Steve

@Steve 打扰一下，显然这个解决方案对于原帖作者是有效的，否则他不会将其标记为已接受。如果它对于你无效，那么显然你有一个不同的问题需要解决。 - Yi Jiang

他明确表示问题是div2显示在div1上面，并询问如何使div1显示在div2上面。你的解决方案与他的完全相同。这与我的问题无关，只是这个StackOverflow问题和答案会误导未来的任何人。 - Steve

@Steve，我认为现在你需要更好地表达你的意思。可以粘贴一个图片链接或者其他什么。 - Benjol

很明显OP的意思是要合成：他想任意地使一个元素在保持相同相对定位流的情况下显示在另一个元素之上（对此有任何疑问），z-index可以解决这个问题。任何给定的示例代码都可能不准确或有缺陷（最好不要），但仍然可以概述问题，因此我在这里看到答案回应了OP明确提出的问题，z-index对我也起作用。 - mikl

Answer 2

<style>
.container{
  position:relative;
}
.div1 {
    z-index:80;
    width:500px;
    height:500px;
    float: left;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #aaa;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}

.div2 {
    z-index:-10;
    position:absolute;
    width:500px;
    height:500px;
    float: left;
    left:560px;
    top:30px;
    box-shadow: 0px 0px 80px #A0A0A0;
    -webkit-box-shadow: 0px 0px 80px #333;
    -moz-box-shadow: 0px 0px 80px #A0A0A0;
}
</style>
<div class="container">
  <div class="div1">asdf </div>
  <div class="div2">asd asdf</div> 
</div>

z-index越高，div就会在顶部，因此您可以根据需要进行调整，但为了给出精确的感觉，您可能需要玩弄颜色，暗影与明亮的阴影。

- Pramendra Gupta