当您在其下方添加另一个div时如何使盒子阴影保持不变？答案

【问题标题】：How to make box shadow stay when you add another div below it?当您在其下方添加另一个div时如何使盒子阴影保持不变？
【发布时间】：2013-07-22 08:53:24
【问题描述】：

我网站上的导航栏下方有一个框阴影，但由于某种原因，当我在其下方添加另一个 div（本质上只是一个巨大的图像）时，导航栏上的框阴影消失了，几乎就像图像一样与导航栏重叠，或者至少与它的框阴影重叠。下面是 2 张图片说明我的意思。

下面没有 div/图片 - http://puu.sh/3Iw9F.png 使用下面的 div/图像 - http://puu.sh/3Iwbx.jpg

我尝试弄乱一些 z-index，但没有成功。是不是我做错了什么？

    <div id="navbar">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
     </div>

    <div id="images">
        <img src="image/image1.jgp" />
    </div>

    #navbar {width:100%;padding:10px 0px;text-align:center;z-index:100;box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);-moz-box-shadow:0 1px 3px rgba(34,25,25,0.4);-webkit-box-shadow:0 1px 3px rgba(34,25,25,0.4);}
    #navbar a {text-decoration:none;padding:5px 10px;border:1px solid #fff;font-size:16px;font-family: 'Source Sans Pro', sans-serif;color:#3f3f3f;font-weight:900;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
    #navbar a:hover {background:#F26311;border:1px solid #E0570F;color:#fff;text-shadow:0px 2px 2px #E0570F;}

    #images {width:100%;}

【问题讨论】：

请发布您的代码。
尝试将position: relative 放入您的div#navbar。 box-shadow 消失的原因是你的div#images 重叠了它
太棒了，谢谢。

标签： html z-index css

【解决方案1】：

您可以尝试将它们都包含在另一个 div 中。

<div id="wrap">
  <div id="navbar">
  </div>
  <div id="images">
  </div>
</div<

然后将阴影放在包装上它应该显示在图像的底部。或者你想添加到wrap div 中的任何内容。

还有另一个选项，而不是将它们包含在 div 中。您可以在导航上添加填充，然后 position:relative; top:x; 图像 div。

希望这会有所帮助。

【讨论】：

【解决方案2】：

您的问题是，当您添加阴影时，该阴影不包含在 div 中。您需要做的是在菜单栏底部添加填充，以便为您的阴影留出空间。

【讨论】：