Как разместить текст после относительного позиционированного элемента?

Question

У меня есть абсолютный позиционированный тег div (дочерний элемент), расположенный внутри относительного позиционного тега div (parent). Я хочу показать текст после родительского 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. Но что делать, если я не знаю точную высоту родительского 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>