상대 위치 지정된 요소 뒤에 텍스트를 배치하는 방법은 무엇입니까?

Question

상대 위치 지정된 div 태그 (부모) 안에 절대 위치 지정 div 태그 (하위)가 있습니다. 부모 div 뒤에 텍스트를 표시하려고하지만 잘못된 위치에 배치됩니다.

HTML

<div class="parent"> 
    <div class="child" style="width: 200px; height: 100px; background-color: red;"></div> 
</div> 
<p>The text which should be shown after parent div</p> 

CSS

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 20px; 
    left: 30px; 
} 

무엇을 할까?

업데이트

유형의 실수가 수정되었습니다.

부모 div의 높이를 나타내는 Vitorino Fernandes의 솔루션이 좋음을 나타냅니다. 하지만 부모 div의 정확한 높이를 모르는 경우 어떻게해야합니까? 상위 div의 높이를 생략하고 그 뒤에 텍스트를 넣을 수 있습니까?

Answer 1

오타 실수는 position하지 postion이 height:100px하지 height 100px해야 할 상대 요소에 height를 추가해야

.parent { 
 
    position: relative; 
 
    width: 250px; 
 
    height:300px; 
 
    border:1px solid red; 
 
} 
 
.child { 
 
    position: absolute; 
 
    top: 20px; 
 
    left:30px; 
 
    width: 200px; 
 
    height:100px; 
 
    background-color: red; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div> 
 
<p>The text which should be shown after parent div</p>