html - 由于 z-index，标题 div 太大了吗？

Question

我使用 z-index 在我的标题中分层图像，现在我的标题太大了。基本上，高度与所有图像在没有重叠的情况下布局时的高度相同，但它最终只是空白。结果，正文与标题重叠。

这是页面，只看我的意思可能最有意义，但如果需要我可以发布代码!

http://kerryaltmantest.info/hometest.html

ETA - 这是 CSS:

#header 
{ width: 1100px; margin:0 auto; background: #ffffff;}
#body
{width: 950px; margin:0 auto; background: #ffffff;}
#menu1 {
width: 890px; margin:0 auto; background: #ffffff;}
#content {
width: 930px; margin:0 auto; background: #ffffff;
border-left: 10px solid #2b297f;
border-right: 10px solid #2b297f;}

body {
background: #d0d0d0;}

.background
{
border: 0px ;
position: relative;
z-index: 1;
left: -150px;
top: -30px
}

.mainheader
{
border: 0px;
position: relative;
z-index: 2;
top: -185px;
left: 170px;
}
.phone
{ 
position: relative;
z-index: 3;
top: -298px;
left: 675px}
.email
{ 
position: relative;
z-index: 4;
top: -287px;
left: 720px}

这是 HTML:

<div id="header">
    <div id="mainRunner"><img class="background" height="200" src="http://i.imgur.com/K1W98DF.png" width="800" /> <img class="mainheader" height="150" src="http://i.imgur.com/sdqMfWT.png" width="500" /></div>
    <div class="contactinfo"><img class="phone" height="40" src="http://i.imgur.com/5Wew8PC.png" width="250" /><br><a href="mailto:kerralt@aol.com"><img class="email" height="30" src="http://i.imgur.com/bXs6aht.png" width="200" /> </a></div></div>

Answer 1

您的所有图像都具有 position:relative，但根据您的描述，您不希望它们是相对的，您希望它们是绝对的。

将“相对”更改为“绝对”并相应地重新调整“top:”属性。

示例 CSS:

#header 
{ width: 1100px; margin:0 auto; background: #ffffff; position:relative}
#body
{width: 950px; margin:0 auto; background: #ffffff;}
#menu1 {
width: 890px; margin:0 auto; background: #ffffff;}
#content {
width: 930px; margin:0 auto; background: #ffffff;
border-left: 10px solid #2b297f;
border-right: 10px solid #2b297f;}

body {
background: #d0d0d0;}

.background
{
border: 0px ;
position: absolute;
z-index: 1;
left: -150px;
top: -30px
}

.mainheader
{
border: 0px;
position: absolute;
z-index: 2;
left: 170px;
}
.phone
{ 
position: absolute;
z-index: 3;
top:45px;
left: 675px}
.email
{ 
position: absolute;
z-index: 4;
top: 100px;
left: 720px}