Position in Html - html

Question

I created a div tag at the beginning of my document in html with specified width and height. Now after closing the div tag, whenever I create other tags like the p tag they are always inside the div tag I created instead of at the bottom of the page.
Do I have to position every element?
How many times do I have to use the relative and absolute positioning in a document?

Answer 1

An absolute positioned element is out of the normal flow of document so it not takes room. You should set dimensions for its relative parent manually to simulate a normal flow. You may use a fixed height in pixels or use aspect ratio Technics for percent dimensions.
A sample of relative div with no size:
#test{
position:relative;
}
#abs{
position:absolute;
}
<div id="test">
<div id="abs">
This div will expand the relative parent with 0 pixels in height
</div>
</div>
This text has overlap with previous element.
A sample of relative div with fixed size:
#test{
position:relative;
height:60px;
background:#ff0000;
}
#abs{
position:absolute;
}
<div id="test">
<div id="abs">
This div is absolute but the parent has its own size
</div>
</div>
This text has no overlap with previous element.
A sample of relative div with aspect ratio:
#test{
position:relative;
padding-top:30%;
background:#ff0000;
}
#abs{
position:absolute;
top:0;left:0;right:0;bottom:0;
}
<div id="test">
<div id="abs">
This div is absolute but the parent has its own aspect ratio 1:0.3
</div>
</div>
This text comes after the previous element.
Finally I have to say that if you are a graphic designer and want to design a web page, you are not ought to design entire the page using relative and absolute elements. You have too many options to design a template using blocks, inline-blocks, tables , flex boxes etc. which regard the normal flow of document.