4

小提琴：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);
}
4

3 回答 3

10

你几乎拥有它！您需要做的就是添加绝对或相对于容器的位置！如果您希望容器像普通的 dom 元素一样使用，则为相对位置，如果您希望容器自由浮动，则为绝对位置！

position:relative;

http://jsfiddle.net/G5FaQ/1/

祝你好运，如果您还有其他问题，请告诉我:)

于 2013-09-24T16:42:12.617 回答
3

给你的#navigationid 某种定位...这是使用的要求z-index..

#navigation {
    position: absolute;
    width:100%;
    z-index: 10;
}

演示

于 2013-09-24T16:41:55.417 回答
0

您可以使用

 position: absolute;

在内容 div 中，然后使用左右管理它..

于 2013-09-24T16:48:13.450 回答