我有两个框,标题和内容。我在这些上使用 box-shadow 使它们看起来更漂亮。现在,两个阴影都可见,一个在另一个之上。但我希望标题阴影不要漂浮在内容框上。
如果我将 position: relative 添加到标题框,内容阴影将停止 float 在标题上(这正是我想要做的,但相反)。但是,尝试相反的方法是行不通的。 Z-index 似乎也不起作用。
fiddle :http://jsfiddle.net/JR93S/24/
h2 {
width: 300px;
margin: 20px 0px 0px 20px;
padding: 5px 11px 5px 11px;
border-radius: 3px;
color: #333;
background-color: #CCF;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
}
div {
width: 300px;
height: 300px;
margin: 0px 0px 0px 20px;
padding: 10px 10px 10px 10px;
border: 1px solid #999;
border-radius: 3px;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
}
<h2>title</h2>
<div>some stuff here</div>
有什么想法吗?谢谢!
最佳答案
关于z-index - 盒子阴影溢出问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11301837/