<div class="out">
<span class="static">static</span>
<span class="relative">relative</span>
<span class="absolute">absolute</span>
<span class="fixed">fixed</span>
</div>
.out{
position: relative;
}
span{
border: 1px solid white;
text-align: center;
}
.relative{
position: relative;
/* width: 50px;
height: 50px; */
top: 20px;
z-index: 12;
background-color: var(--grey1);
}
.absolute{
position: absolute;
width: 80px;
height: 80px;;
top: 30px;
left: 40px;
z-index: 11;
background-color: #FF0000;
}
.fixed{
width: 50px;
height: 50px;
position: fixed;
z-index: 10;
left: 90px;
background-color: var(--grey2);
}
body{
background-color: rgb(30,30,30);
color: white;
font-family: verdana;
}
:root{
--grey1: rgb(60,60,60);
--grey2: rgb(90,90,90);
--grey3: rgb(120,120,120);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.