저는 비교적 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;
}
적용되어 Z- 인덱스 : 1 #logo 및 # 모두 logoimg 좋은 생각이야? 나는 그렇게 생각하지 않는다. –
흠, 현재 파이어 폭스가이 문제를 갖고 있지 않기 때문에 어떤 브라우저 (및 버전)를보고 있는가? – DaiYoukai