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

你的所有图像都有位置：相对，但根据你的描述，你不希望它们是相对的，你希望它们是绝对的。

改变＆＃34;亲戚＆＃34;绝对＆＃34;绝对＆＃34;并重新调整你的＆＃34;顶部：＆＃34;相应的财产。

示例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}

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

1 个答案: