브라우저의 크기를 조정할 때 절대 이미지의 CSS 절대 텍스트가 이동합니다. 그 이유는 무엇입니까?

Question

3 열 레이아웃을 만들었습니다. 중간 콘텐츠의 이미지 위에 일부 텍스트 (제목)를 배치하고 싶습니다. 하지만 브라우저 창 크기를 조정할 때마다 텍스트가 움직입니다. 어떤 제안? 내 생각 엔 절대 컨테이너 (이미지 자체를 상대 컨테이너에 위치)에 이미지를 배치하는 동안 요소 이동없이 절대 레이어를 배치 할 수 있다고 생각했습니다. 어떤 제안? 여기에 jsfiddle

: http://jsfiddle.net/Dkjsc/3/

UPDATE : 우리가 middlecontent에서 높이 속성을 제거하면 모든 것이 잘 작동합니다. 그러나 이것은 갈 길입니까?

HTML :

<div id="content" class="content"> 

    <!--LEFT--> 
    <div id="leftcontent" class="leftcontent">&nbsp;</div> 

    <!--MIDDLE--> 
    <div id="middlecontent" class="middlecontent"> 
    <div id="heading" class="heading">Text</div> 
    <img src="images/Windows/Window_10.png" alt="" style="width:100%;"> 
    </div> 

    <!--RIGHT--> 
    <div id="rightcontent" class="rightcontent">&nbsp;</div> 
</div> 

CSS :

html, body { 
margin:0px; 
padding:0px; 
width:100%; 
height:100%; 
} 
.content { 
position:relative; 
width:100%; 
height:100%; 
} 

.leftcontent{ 
position:absolute; 
width:20%; 
height:100%; 
left:0%; 
} 

.middlecontent { 
position:absolute; 
text-align:center; 
width:60%; 
height:100%; 
left:20%; 
top:10%; 
} 

.rightcontent { 
position:absolute; 
width:20%; 
height:100%; 
right:0%; 
} 

.heading{ 
position:absolute; 
text-align:center; 
width:100%; 
top:12%; 
} 

당신은 당신이 그렇지 않으면 상대하려면 고정 된 크기의 요소에 위치를 둘 필요가

Answer 1

는 상대적입니다 크기를 계속 변경하는 창