將Z-index添加到DIV下方後，我的DIV頂部出現了空缺

我剛剛開始將網站放在一起。沿着頂部，我有一個在底部有陰影的標題圖像。我有一個圖像，我想坐在這下面，以便您可以看到圖像頂部的投影。我把它放在標題DIV的下面，並放置了一個以-1爲值的z-index。這很好地放在DIV的後面，然後我從頂部增加了一個220px的absalute位置。但是，在添加z-index值之後，它將我的標題DIV略微降低，並在頂部留下了一個空白處？將Z-index添加到DIV下方後，我的DIV頂部出現了空缺

我的HTML代碼：

<!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; 
}

來源

2014-06-06 user3714234

設定的主體緣0

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

DEMO HERE

來源

2014-06-06 08:29:23

完美！非常感謝您的幫助！ – user3714234

請給出正確的答案 –

將Z-index添加到DIV下方後，我的DIV頂部出現了空缺

回答

相關問題