Question on positioning

Question

Please I need more insight on Absolute and Relative positioning... Expecially their differences. ...
Thanks

Answer 1

POSITION ABSOLUTE
Elements with position:absolute are taken out of the normal flow of the page layout. You can position this element with top, left, right and bottom. For example:

CSS:
#example {
    position:absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
}

HTML
<div id="example">
<p>HelloWorld </p
</div>

Your element example will be positioned 10px from the top and 10px from the left of the browser viewport. If there are other elements at this position the example element will be positioned above the other elements, even if the example-element is written in your html-code behind other elements.

If you have the same example but the example-element is a child of an relative positioned element the example-element will be positioned 10px from the top and 10px from the left of the parent element.

Make sure your always set a height and a width to your absolute positioned element.

POSITION RELATIVE
Elements with position relative will stay in the normal flow of the page layout and if your written your relative-element in your html-code behind other elements, then it will be positioned behind this elements on your page. With top, left, right and bottom you can position your element as you do with an absolute positioned element, but it will e.g. not jump at the top of a page when you write top:5px. The relative element will sit 5px under its previous position.

I hope you understand now :-) Maybe this video will help you too:

 https://m.youtube.com/watch?feature=youtu.be&v=aFtByxWjfLY

Answer 2

Thanks