CSS在DIVs中的位置困境

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

我的问题出现在标志的位置上。我的徽标略高于顶部Div，这导致底部Div仅覆盖徽标的底部。如果我裁剪或调整徽标大小，问题就解决了。但我不想那样做。我想做一个更高的z指数的标志。但它不起作用。似乎忽略了z索引

以下是我目前掌握的情况：

<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底部在headerlogo分区中肯定覆盖了72px高度徽标的底部

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

---

是否有其他方法让headerlogo在站点headerdiv中解决上述问题？

这样行吗？我添加了一个位置：绝对属性

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

您的

#headernav top

为50像素高，而内部

#headerlogo

为72像素高。 因此，内部元素流过外部元素的边界。如果您没有绝对定位

#headernav top

，只需忽略它的

height

属性即可。元素现在将根据需要在高度上展开（例如，关于背景图像容器的高度）。

看起来您已经AAAAA了，这就是为什么会出现这种情况：静态定位元素的z索引被忽略（默认值）。z索引仅在应用于

位置：相对

、

位置：绝对

或

位置：固定

元素时生效

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

位置：相对的

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

位置：绝对

这将使元素脱离流。与

relative

相反，这将使其在文档中的有效大小为0px乘以0px。其他元素随后将塌陷到该元素本应占据的区域中。（请注意，这有时会使这些元素隐藏在

绝对元素的后面。）

位置：固定


与绝对值相同。Out-of-flow，但是对于这个元素，元素是相对于窗口的，而不是第一个非静态父元素。（仅当使用
顶部
、
右侧
、
底部
和
左侧
进行定位时才很重要）滚动时，它也会显示为“粘住”窗口

出于您的目的，
position:relative
没有定位属性可能是最好的。
只需将徽标位置设置为绝对位置，您甚至不需要z-index，尽管如果您想对其进行干燥，可以将其设置为更高的z-index，到目前为止，它完全消失。但是，我把它改成了位置：相对的；它成功了。