Question

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

Answer 1

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

position:relative;

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

祝你好运，如果您有其他问题，请告诉我们。）

Answer 2

为您的#navigation ID提供某种定位......这是使用z-index的要求..

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

<强> DEMO

Answer 3

您可以使用

 position: absolute;

在内容div中，然后使用左右对照进行管理..

盒子阴影在图像上？

3 个答案: