CSS Position and Layers
Position:
The position property defines how an element will be positioned on a page.
Static Positioning
It takes by HTML as a default, no need to use positioning keywords.
Ex.
.box {
padding: 20px;
background: #7dc765;
}
Relative Positioning
Ex.
.box {
position: relative;
left: 100px;
}
Other positioning keywords.
-
Absolute Positioning
-
Fixed Positioning
Layers:
Use z-index to define layers. It used to move box not only x and y-axis but also z-axis. It used to create complex web pages.
Property:
absolute, fixed, or relative.
Ex.
.box {
position: absolute;
left: 10px;
top: 20px;
z-index: 2;
}