2012-08-03 3 views
2

저는 비교적 CSS에 익숙하지 않습니다. 그리고 페이지 레이아웃에서 다음과 같은 문제에 직면하고 있습니다.위치 : 절대 div가 위치 내에서 사라짐 : relative

다른 게시물을 보았지만 대답을 찾을 수 없습니다. 문제는 지정한 경우입니다.

위치 : 절대 #logo #logoimg 내에로드되지 않습니다. 그러나 제거하면

위치 : 절대 #logoimg 올바르게로드됩니다. div를 위치 지정하는 방법을 배우려고합니다.

상대 div 내에 절대 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- 인덱스 : 1 #logo 및 # 모두 logoimg 좋은 생각이야? 나는 그렇게 생각하지 않는다. –

+0

흠, 현재 파이어 폭스가이 문제를 갖고 있지 않기 때문에 어떤 브라우저 (및 버전)를보고 있는가? – DaiYoukai

답변

0

당신이 연주 할 때 원숭이와 깔끔한 바이올린 : http://jsfiddle.net/TjQLf/

+0

감사합니다 :) :) 이미지가 aptana 스튜디오 시사회에서 경계를 벗어났습니다 ... – Dibyajyoti