CSS helps developer to position HTML element at whatever location they like. We can specify whether we want the element positioned relative to its natural position in the page or absolute based on its parent element.
position: static;
The element will remain in the natural flow of the page.
It will not react to the following properties:
- top
- bottom
- left
- right
- z-index
position: relative;
The element will remain in the natural flow of the page.
It also makes the element positioned: it will act as an anchor point for the absolutely positioned pink block.
Also, it will react to the following properties:
- top
- bottom
- left
- right
- z-index
Ancestor container
Target element
position: relative
Child element
position: absolute
right: 5px
top: 5px
position: absolute;
The element will not remain in the natural flow of the page. It will position itself according to the closest positioned ancestor.
Because it’s positioned, it will act as an anchor point for the absolutely positioned pink block.
Also, it will react to the following properties:
- top
- bottom
- left
- right
- z-index
Ancestor container
Target element
position: absolute
left: 0
top: 0
Child element
right: 5px
top: 5px
position: fixed;
The element will not remain in the natural flow of the page. It will position itself according to the viewport.
Because it’s positioned, it will act as an anchor point for the absolutely positioned pink block.
Also, it will react to the following properties:
- top
- bottom
- left
- right
- z-index
TCCI teaches web design course to the interested person in Bopal and Satellite in Ahmedabad.
Our course include HTML, CSS,Bootstrap, Java Script, Image making etc.
For more information about Courses at TCCI.
Call us @ 9825618292
Visit us @ http://tccicomputercoaching.com/
tccicomputercoaching 