小提琴:http://jsfiddle.net/G5FaQ/
我有一个包含在div中的图像.紧邻所述图像的div具有框阴影.我希望div的box-shadow与图像重叠,所以看起来图像是它所处的div的一部分,而不是看起来奇怪地悬停在它上面.我试过z-index,正如你在小提琴中看到的那样,但似乎失败了.
HTML:
<body>
<nav id="navigation">
<img src="http://web.fildred.com/media/images/blank_logo.jpg" height="150px" width="250px" alt="logo">
</nav>
<div id="content_wrapper">
<!-- InstanceBeginEditable name="content" -->
<section id="content">
Content.
</section>
<!-- InstanceEndEditable -->
</div>
</div>
</body>
CSS:
body {
background: #ffd288;
}
/*Nav*/
#navigation {
width:100%;
z-index: 10;
}
.logo {
z-index: 1;
}
/*Content Section*/
#content {
background: #393951;
height: 2000px;
z-index: 10;
-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
box-shadow: 0px 0px 20px rgba(0,0,0,.8);
}
306*_*6d0 10
你几乎拥有它!你需要做的就是添加绝对或相对于容器的位置!如果您希望容器像普通的dom元素一样运行,则为相对位置;如果您希望容器自由浮动,则为绝对位置!
position:relative;
祝你好运,如果你有另一个问题,请告诉我:)