箱形陰影在圖像？

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

箱形陰影在圖像？

回答

相關問題