DIV 中的 CSS 位置困境

Question

我正在处理我网站的顶部标题栏样式。我在 Header DIV 中放置了 2 个 DIV。一个 Div 在顶部，而另一个在底部。顶部专用于左侧 Logo 和右侧链接，而底部 Div 专用于水平菜单(我将在稍后完成)。

我的问题出在 Logo 的位置上。我的 Logo 比顶部的 Div 略高，这导致底部的 Div 只是覆盖了我的 Logo 的底部。如果我裁剪或调整 Logo 的大小，问题就解决了。但我不想那样做。我想在更高的 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 高度 Logo 的底部。

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

是否有另一种方法可以让 headerlogo 位于 siteHeader div 上方？

Answer 1

看来你已经found the answer aaaa 这就是为什么会出现这种情况的原因:对于静态定位的元素(默认)，z-index 被 忽略。 z-index 只有应用于 positon:relative、positon:absolute 或 positon:fixed 元素时才会生效。

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

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

position:absolute位置
这使元素脱离流动。与 relative 相反，这将在文档中为其提供 0px x 0px 的有效大小。然后其他元素将折叠到该元素原本会占据的区域中。 (请注意，这有时会使这些元素隐藏在您的 absolute 元素后面。)

位置:固定
与 absolute 相同。流出，但对于这个，元素是相对于窗口而不是第一个非静态父元素。 (仅当您使用 top、right、bottom 和 left 定位时才重要)它也会出现滚动时“粘”在窗口上。

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