箱形阴影在图像？

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

来源

2013-09-24 fildred13

你几乎已经拥有它了！所有你需要做的是添加绝对或相对于容器的位置！如果你想让容器像一个普通的dom元素一样来定位相对位置，或者如果你想让它自由浮动，那么相对位置是绝对的！

position:relative;

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

祝你好运，让我知道，如果你有其他问题:)

来源

2013-09-24 16:42:12

我会接受，当我可以，因为我认为这一个来了我首先。另外，积极的态度:)。不过也要感谢brbcoding。不敢相信我太傻了。 – fildred13

哦，我认为在我之前的编码已经达到了10秒:)但是谢谢你！ –

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

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

DEMO

来源

2013-09-24 16:41:55 brbcoding

您可以在内容DIV使用

position: absolute;

，然后使用权进行管理和左..

来源

2013-09-24 16:48:13

箱形阴影在图像？

回答

相关问题