Question

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

下面没有div / image - http://puu.sh/3Iw9F.png 使用下面的div / image - 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%;}

Answer 1

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

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

然后将阴影放在包装上它应该显示在图像的底部。或者您要添加到wrap div。

的任何内容

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

希望这有帮助。

Answer 2

你的问题是，当你添加阴影时，阴影不包含在div中。您需要做什么将填充放在菜单栏的底部，以便有阴影空间。

当你在它下面添加另一个div时，如何使盒子阴影停留？

2 个答案: