div position:absolute vs div position:relative
div position:absolute VS div position:relative
Note: There are alot of ways to position divs, and they are covered in other tutorials. In this tutorial we will go over the basics of position:absolute and position:relative
Objectives: This tutorial is written to explain the effects of position:absolute and position:relative in conjunction with each other.
Position:relative and Position:absolute
Think of the browser window as one div with {width:100%; height:100%; position:relative;} Any divs or objects placed inside of the <body> tags will be positioned relative to the browser window.
The position:relative Tag
Think of this tag as the “Parent” for anything inside of it. Objects you place inside will react to positioning attributes such as left, right, top, bottom, float relative to its parent container.
The position:absolute Tag
Placing this tag on an object allows it to position relative to its parent container, even if there are other containers in between.
In the below example, the difference is in the top image, the orange image has the attribute position:absolute, so it is positioned relative to the browser window (by default). In the bottom image the div “header-container” has the attribute, position:relative; so the image is positioned relative to that container instead.
Instead of being positioned relative to the browser window, the orange image is placed relative to header-container due to the property “position:relative” on the div.
If your curious about the float:left, it is a very powerful tool for positioning and you should check out How to use float:left.
I hope this tutorial helped you, please if you have any feedback, suggestions, or comments Contact me here.