CSS Case Study of position
1. Position absolute
.absolute {
position: absolute;
background-color: crimson;
color: white;
width: 49%;
height: 200px;
left: 30%;
z-index: 40;
top: 10%;
}
.none {
position: none;
background-color: gray;
color: white;
width: 98%;
height: 600px;
}
2. Position relative
.relative {
position: relative;
background-color: darkcyan;
color: white;
width: 49%;
height: 200px;
left: 30%;
z-index: 20;
top: 12%;
}
.none {
position: none;
background-color: gray;
color: white;
width: 98%;
height: 600px;
}
3. Position none
.none {
position: none;
background-color: gray;
color: white;
width: 49%;
height: 200px;
}
.none {
position: none;
background-color: gray;
color: white;
width: 98%;
height: 600px;
}
4. Position fixed
.fixed {
position: fixed;
background-color: khaki;
width: 49%;
height: 200px;
right: 0;
top: 12%;
z-index: 30;
}
.none {
position: none;
background-color: gray;
color: white;
width: 98%;
height: 600px;
}
5. Position sticky
.sticky {
position: sticky;
background-color: darkviolet;
color: white;
width: 49%;
height: 200px;
z-index: 20;
top: 10%;
}
.none {
position: none;
background-color: gray;
color: white;
width: 98%;
height: 600px;
}