절대 요소가 표시되지 않습니다

Question

div에 이미지 요소를 넣으려는 div 요소가 있습니다. 문제는 이미지를 절대 위치에 배치 할 때 이미지가 나타나지 않고 컨테이너 div가 주 div에 공간을 차지하지 않는다는 것입니다. 그러나 위치를 제거하면 절대 이미지가 잘 보입니다. 위치를 제거하지 않고 표시하는 방법에 대한 도움 : 절대적입니까? 당신이 요소가 absolute 딘기로 설정하면

<div id="main"> 
    <div id="image_wrapper"> 
    <img style="width:100%; position:absolute; top:0px; left:0px;" src="image.png" /> 
    </div> 
</div> 

Answer 1

,이 문서의 흐름에서 제거 :

코드는 다음과 같은 것입니다. 이 경우, 컨테이너 <div>에 컨테이너 내부에 "아무 것도 없습니다"라는 의미이므로 높이가 0으로 축소됩니다.

또한 절대 요소의 원점을 제공하기 위해 포함 된 요소 position:relative을 제공해야합니다.

하지만 주요 문제는 컨테이너 높이가 부족하다는 것입니다. 수정하면 이미지가 표시됩니다.

그렇지 않으면 이미지 높이를 지정하십시오.

Answer 2

HTML

<div id="main"> 
    <div id="image_wrapper"> 
    <img src="image.png" /> 
    </div> 
</div> 

CSS

#image_wrapper { 
position:relative; 
} 

#image_wrapper img { 
    width:100%; 
    position:absolute; 
    top:0px; left:0px; 
} 

.... 그것은 도움이 어쩌면이 시도