Question

编辑显示当前代码并添加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中的人能够上传太大的标题图像并自动裁剪。我想我可以通过在header标签中添加overflow：hidden来做到这一点。它有效。但是只要我添加溢出：隐藏，标题栏突然位于标题图像的后面，而不是它所属的顶部。谁能告诉我我做错了什么？

CMS中的东西实际上并没有由我编码。我只是在编辑CSS文件。所以我只能告诉你在查看网站的源文件时我能看到的html：

<body>
<div id="siteborder">
<div id="container">
<div id="header">
<div id="header_bar">&nbsp;</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 -->

Answer 1

您应该考虑在CSS中使用z-index明确指定应该“在顶部”的内容以及应该在“后面”的内容。那里有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>将“在其他”之下，因为它未指定，因此默认为{{1} （嵌套时父项的auto，通常为0）。因此，您应该将z-index（例如）添加到您想要位于顶部的特定对象（如果您想要“在顶部”的图像实际上由z-index:10定义）：

header_img

正如Hilgaran在下面的评论中所提到的，您需要明确说明您尝试#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; }的对象的position规则。对于未嵌套在具有备用z-index的父级下方的对象，默认position为relative，因此请明确指定它以使position功能。

堆叠内容，命令错误隐藏溢出

1 个答案: