CSS - Position
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div:first-of-type{
text-align:center;
position:relative; /*It's original position remains in the flow of the document just like static(default) but left/riight/bootom/top will work here.*/
left:50px;
margin-bottom:0px;
width:200px;
height:100px;
background-color:teal;
}
div:nth-of-type(2){
text-align:center;
position:absolute; /*It will be out of the flow document,thats why other overlaps it as it is not even there*/
width:200px;
height:100px;
background-color:yellow;
}
div:nth-of-type(3){
text-align:center;
left:400px;
position:fixed; /*It will be out of the flow document,thats why other overlaps it as it is not even there.But it will be relative to the <html> element or relative to viewport,thats why it always stays in the same place even if the page is scrolled.*/
bottom:-50px;
width:200px;
height:100px;
background-color:orange;
}
div:nth-of-type(4){
text-align:center;
position:fixed;
left:600px;
bottom:-50px;
width:200px;
height:100px;
background-color:red;
}
div:nth-of-type(5){
text-align:center;
position:fixed;
left:800px;
bottom:-50px;
width:200px;
height:100px;
background-color:coral;
}
div:nth-of-type(6){
width:200px;
height:150px;
background-color:red;
}
div:nth-of-type(7){
text-align:center;
position:sticky;
width:200px;
height:100px;
background-color:powderblue;
top:400px;
}
div:last-of-type{
width:200px;
height:100px;
background-color:coral;
}
</style>
<title></title>
</head>
<body style="height:1000px">
<div>Position:relative</div><br>
<div>Position:absolute</div>
<div>Position:fixed</div>
<div>Position:fixed</div>
<div>Position:fixed</div>
<div></div><br>
<div>Position:sticky</div><br>
<div></div>
</body>
</html>
Comments
Post a Comment