编辑以显示当前代码并添加 html: 我仍在学习 CSS，但遇到了一些问题。我在页面顶部有一个标题图像。覆盖图像我有一个带主页按钮的标题栏。
#header {height:170px; background-color:#f5fdfb; display:block; overflow:hidden; position:relative;}
#header_bild {
padding-top:0px;
height:170px;
z-index:5;
}
#header_bar {
background-image:url(header_bar.png);
position:absolute;
top:0px;
left:0px;
width:151px;
height:31px;
z-index:10
}
但我希望 CMS 中的人能够上传过大的标题图片，它会被自动裁剪。我想我可以通过在标题标签中添加 overflow:hidden 来做到这一点。它有效。但是一旦我添加 overflow:hidden，标题栏就会突然出现在标题图像的后面，而不是在它所属的顶部。谁能告诉我我做错了什么？
CMS 中的内容实际上并不是我编写的。我只是在编辑 CSS 文件。所以我只能给你看我在查看站点源文件时能看到的html:
<body>
<div id="siteborder">
<div id="container">
<div id="header">
<div id="header_bar"> </div>
<div id="header_img">
<img src="./files/header_seed.jpg" border="0" title="" alt=""></div>
</div>
<div id="logo"><a href="http://www.thispage.net"><img src="files/dummy.gif" width="151" height="30"></a></div>
<div id="linie_header"><img src="files/line_header.png" width="992" height="2"></div>
</div><!-- header end -->
最佳答案
您应该考虑使用 z-index在你的 CSS 中明确指定什么应该在“上面”，什么应该在“后面”。有 plenty那里的好信息。 z-index将具有较高值的对象放在具有较低值的对象的“顶部”。如果未指定，默认值为 auto ，这意味着它从其父级获取此值，该值(通常)为 0。 <html>标签默认为 z-index 0，因此嵌套默认值也将为 0。
.thingone { z-index:10;}
.thingtwo { z-index:5;}
.thingthree { }
在这个例子中，<div class="thingone"></div>将在其他两个之上，并且<div class="thingthree"></div>将在其他“下方”，因为它未指定，因此默认为 auto (嵌套时父级的 z-index，通常为 0)。所以你应该添加 z-index:10 (例如)到您想要位于顶部的特定对象(如果您想要“位于顶部”的图像实际上由 header_img 定义):
#header_img {
padding-top:0px;
height:170px;
position:relative;
z-index:10;
}
#header_bar {
background-image:url(header_bar.png);
position:absolute;
top:0px;
left:0px;
width:151px;
height:31px;
z-index:20;
}
正如 Hilgaran 在下面的评论中提到的，您需要明确说明 position您要尝试的对象的规则 z-index .默认 position是relative对于未嵌套在具有替代项 position 的父项下的对象s，所以明确指定它使z-index功能。
关于css - 内容堆叠，顺序错误 overflow hidden ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21344550/