Question

我正在使用我网站的Top Header Bar样式。我将2个DIV定位在Header DIV中。一个Div在顶部，而另一个在底部。顶部专用于带有右侧链接的左侧徽标，而底部专用于水平菜单（稍后我会完成）。

我的问题出现在Logo的位置上。我的徽标比顶部Div略高，这使得底部Div简单地覆盖了我的徽标底部。如果我裁剪或调整徽标大小，问题就解决了。但我不想这样做。我想在更高的z-index上制作Logo。但它不起作用。似乎忽略了z-index。

这是我到目前为止所拥有的：

<div id="siteHeader">

   <div id="headernav-top" style="height:50px;">
    <div id="headerlogo" style="height:72px;background-image:url('logo.jpg');background-repeat:no-repeat;">
    </div>
    <span id="headertext">  
        Welcome Back, <b>Whomever you are</b> | 
        <a href="/">My Account</a> | 
        <a href="/logout.php">Log Off</a> <br />
    </span>
  </div>

  <div id="headernav-bottom" style="height:39px;background-color:#0C6;">

    More Nav will go here

  </div>
</div> <!-- end siteHeader -->

headernav-bottom 绝对覆盖了 headerlogo div中72px高度徽标的底部。

当我在两个div中放入 z-index 时，它似乎被忽略了。

还有另一种方法可以让 headerHoader 在 siteHeader div中找到 headerlogo 吗？

Answer 1

似乎你已经found the answer aaaa这就是为什么会出现这样的情况：静态定位元素（默认值）忽略z-index 。 z-index仅在应用于positon:relative，positon:absolute或positon:fixed元素时才会生效。

添加非静态位置属性是强制所需元素堆叠的常用方法。你使用哪一个也很重要：

position: relative
这将允许您的元素在文档中保留其流。使用这个元素将使其他元素不会折叠到元素作为静态元素占据的区域。

position: absolute
这会使元素流出。与relative相反，这将使文档中的有效大小为0px×0px。然后其他元素将折叠到该元素将占用的区域中。（请注意，这有时会使这些元素隐藏在absolute元素后面。）

positon: fixed
与absolute相同。流出，但有了这个，元素相对于窗口而不是第一个非静态父级。（仅当您使用top，right，bottom和left进行定位时才重要。当您滚动时，它也会“粘住”到窗口。

出于您的目的，position:relative没有定位属性可能是最好的。

Answer 2

这会有用吗？我添加了 position：absolute; 属性。

<div id="headerlogo" position: absolute; style="height:72px; background-image:url('logo.jpg'); background-repeat:no-repeat;">
</div>

Answer 3

您的#headernav-top高50像素，而内#headerlogo高72像素。因此，内部元件流过外部元件的边界。如果您没有完全定位#headernav-top，请忽略它的height属性。现在元素将根据需要在高度上扩展（例如，尊重背景图像容器的高度）。

DIV中的CSS位置困境

3 个答案: