CSS 상대 위치 지정으로 괴상한 문제가 발생했습니다.

오늘 나는 이상한 점을 발견하여 상대 위치 지정을 사용하여 텍스트를 이미지로 이동시키는 빠른 "건설 중"유형 페이지를 작성했습니다. 상대적 위치 DIV 될하는 데 사용되는 영역은 여전히 공간을 차지 것을CSS 상대 위치 지정으로 괴상한 문제가 발생했습니다.

<html> 
    <head> 
    <title>Bronco Marching Band</title> 
    </head> 
    <body style="background-color: #888;"> 
    <div style="text-align: center;"> 
     <img src="standby.jpg" width="799px" height="600px" alt="Please Stand By" 
     title="The Bronco Band website is down for a major upgrade. Please check back later." 
     style="width: 620px; height: 465px; opacity: 0.8;" /> 
     <div style="color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: relative; top: -300px; left: 0px;"> 
     PLEASE STAND BY 
     </div> 
    </div> 
    </body> 
</html>

것 같다 (당신이 관심이 있다면이 페이지는 SO의 오프라인 페이지에 의해 "영감"이었다). 즉, 위치가 지정되지 않으면 div가있는 이미지 아래에 공백이 남습니다.

이 문제가 발생합니까? 이것보다

출처

2009-04-24 Alex S

가 : 당신의 코드 네 자리를 들여, 그것을 포스트 또는 미리보기에서 렌더링되지 않습니다. – Shog9

여전히 위치가 상대적으로 중요한 요소는 공간을 차지합니다. 당신은 절대적으로 위치 된 요소를 원합니다 ... 당신은 컨테이너와 절대적으로 관계가 있습니다.

<div style="text-align: center;position:relative; zoom: 1;"> 
    <img src="standby.jpg" width="799px" height="600px" alt="Please Stand By" title="The Bronco Band website is down for a major upgrade. Please check back later." style="width: 620px; height: 465px; opacity: 0.8;" /> 
    <div style="color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: absolute; top: 200px; left: 0px; width: 100%; text-align:center"> 
    PLEASE STAND BY 
    </div> 
</div>

키 변경 :

컨테이너 div가 position: relative 스타일
어린이 div 그것이 상위 내의 절대 좌표 에 위치되게, position: absolute 스타일 세트를 가지고있다 갖는다.

부모의 상단에 상대적으로 위치를 지정하고 text-align: center이 작동하도록 전체 너비는 div으로 지정합니다.

편집 : IE6가 제대로 배치하기 위해서는, 내가 컨테이너 DIV에 대한 레이아웃을 강제로 해킹을 사용했습니다 다음 zoom: 1 스타일. IE6를 지원할 필요가 없다면 이것을 생략 할 수 있습니다. 테스트

: FF3, IE6, Chrome1, Chromium2

데모 : http://jsbin.com/uqisa 향후 참조를 위해

출처

2009-04-25 00:03:35 Shog9

오히려 :

position: relative; 
top: -300px;

이 시도 : 별도의 노트에

margin-top: -300px;

를, 당신의 <img /> 태그 내에, 당신은 또한이 설정을 변경해야합니다 이것에

width="799px" height="600px"

width="799" height="600"

출처

2009-04-25 00:02:23

죄송합니다. 너비/높이를 잊어 버렸습니다. 나중에 CSS에서 관리합니다. –

CSS 상대 위치 지정으로 괴상한 문제가 발생했습니다.

답변

관련 문제