在添加z-index到下面的DIV后，我的DIV顶部出现了一个间隙

我刚刚开始把一个网站放在一起。沿着顶部，我有一个标题图像，底部有一个投影。我有一张图片，我想把它放在这个下面，这样你就可以看到图片顶部的投影。我把它放在标题DIV下面，并放置了一个z-index，值为-1。这很好地放置在DIV后面，然后我添加了一个距离顶部220px的位置。然而，在添加了z-index值之后，它使我的标题DIV稍微下降，并在顶部留下了空白?

MY HTML CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainhome">
    <div class="header"></div>
            <div class="mainimage"></div>
</div>
</body>
</body>
</html>

我的CSS

@charset "UTF-8";
/* CSS Document */
body {
    background-image:url(images/header-background.png);
    background-repeat:repeat-x;
}
.mainhome {
    width: 855px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
.header {
    height: 236px;
    background-image:url(images/header-background.png);
    background-repeat:repeat-x;
    clear:left;
}
.mainimage {
    width: 855px;
    height: 423px;
    background-color:#0C9;
    position:absolute;
    top:220px;
    clear:left;
    z-index:-1;
}

设置body margin 0

body {
    background-image:url(images/header-background.png);
    background-repeat:repeat-x;
    margin: 0px;
}

演示

相关内容

最新更新

热门标签：