html - How to place text after the relative positioned element? -

i have absolute positioned div tag (child) placed inside relative positioned div tag (parent). want show text after parent div, placed in incorrect position.

html

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

css

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

what do?

updated

type mistakes has been corrected.

solution, proposed vitorino fernandes, indicate height of parent div good. if don't know exact height of parent div? can omit height of parent div , put text excatly after it?

typo mistake should position not postion should height:100px not height 100px , add height relative element

.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 should shown after parent div</p>