2012-08-03 144 views
2

我對CSS比較陌生,並且在我的頁面佈局中遇到以下問題。位置:絕對div在位置內消失:相對

我看了其他帖子,但無法找到答案。問題是當我指定

位置:絕對在#logo #logoimg中不加載。但是,如果我刪除

位置:絕對#logoimg加載正確。我正在嘗試學習如何在div divs中創建絕對div。

我的HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>New Web Project</title> 
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/> 
    </head> 
    <body> 
     <div id = "wrapper"> 
      <div id = "header"> <img src="images/banner.png" /> </div> 
      <div id = "content"> 
       <div id="logo"> 
        <div id="logoimg" > czcz </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

我的CSS

body { 
    margin: 0; 
    padding: 0; 
} 


#header { 
    background: url('images/banner_tile.jpg') ; 
    height: 96px; 
    width: 100% ; 
} 

#header img { 
    display:block; 
    margin: auto ; 
} 

#content img { 
    display:block; 
    margin: auto ; 
} 

#content { 
    /*overflow:auto ;*/ 
    background: url('images/body_tile.png') ; 
    height: 100% ; 
    width: 100% ; 
} 

#logo { position:relative; height: 100px ; } 

#logo #logoimg { 
    position:absolute ; 
    top:300px ; 
    left:700px ; 
    width:398px ; 
    height:200px ; 
    background: url('images/body_sprite.png'); 
    z-index: 1; 
} 
+0

正在申請的z-index:1到兩個#logo和# logoimg一個好主意?我不這麼認爲 – 2012-08-03 14:04:25

+0

嗯,你在看什麼瀏覽器(和版本),因爲目前的Firefox似乎沒有這個問題。 – DaiYoukai 2012-08-03 14:14:17

回答