2

我正在研究我网站的顶部标题栏样式。我在 Header DIV 中放置了 2 个 DIV。一个 Div 在顶部，而另一个在底部。顶部专用于带有右侧链接的左侧徽标，而底部 Div 专用于水平菜单（我将在稍后完成）。

我的问题出现在徽标的位置上。我的 logo 比顶部 Div 略高，这导致底部 Div 简单地覆盖了我的 logo 底部。如果我裁剪或调整徽标大小，问题就解决了。但我不想那样做。我想在更高的 z-index 上制作徽标。但它不起作用。似乎 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肯定覆盖了 72px 高度标志的底部，在headerlogo div中。

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

是否有另一种方法可以让headerlogo在siteHeader div 上方稳定下来？

4

3 回答 3

1

似乎您已经找到了答案aaaa，这就是为什么会出现这种情况的原因：对于静态定位的元素（默认）， z-index会被忽略。positon:relativez-index 仅在应用于、positon:absolute或positon:fixed元素时才生效。

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

position: relative
这将允许您的元素在文档中保留其流程。使用这个可以防止其他元素塌陷到该元素将作为静态元素占据的区域中。

position: absolute
这会使元素脱离流动。与 相反relative，这将使其在文档中的有效大小为 0px x 0px。然后其他元素将塌陷到该元素本来会占据的区域中。（请注意，这有时会使这些元素隐藏在您的absolute元素后面。）

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

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

于 2012-11-07T20:07:18.600 回答
0

这行得通吗？我添加了一个位置：绝对；属性。

<div id="headerlogo" position: absolute; style="height:72px; background-image:url('logo.jpg'); background-repeat:no-repeat;">
</div>
于 2012-11-07T19:43:05.313 回答
0

您#headernav-top的高度为 50 像素，而内部#headerlogo的高度为 72 像素。因此，内部元素流过外部元素的边界。如果您没有定位#headernav-top绝对，只需忽略它的height属性。该元素现在将根据需要扩展高度（例如，考虑背景图像容器的高度）。

于 2012-11-07T19:46:02.937 回答