positions css

<style>

@import url(https://fonts.googleapis.com/css?family=Kotta+One|Kalam|Philosopher|);
::-webkit-scrollbar-thumb:vertical { background:#def;border-radius:0px;box-shadow:0px 0px 0px 0px #000; }
::-webkit-scrollbar-thumb:horizontal { background:black; }
::-webkit-scrollbar { width:33px;height:7px;background:black;border-radius:0px; }

 body { overflow:auto; background:#a08; }

 .static { color:white; background:green; position:static; height:100px; font-size:44px; text-align:center; }
 .static2 { color:white; background:darkgreen; position:static; height:100px; font-size:44px; margin-top:-44px; }
 .relative { color:white; background:red; position:relative; height:100px; z-index:3; font-size:44px; top:11px; text-align:center; }
 .absolute { color:white; background:blue; position:absolute; height:300px;width:800px; z-index:5; font-size:44px; top:33 0px; }
 .sticky { color:black; background:yellow; position:sticky; height:150px; z-index:7; font-size:44px; text-align:center;  }
 .fixed { color:black; background:aqua; position:fixed; height:500px; z-index:9; font-size:44px; top:0px;left:200px; text-align:center; }

</style>

<div class="static">static</div>
<div class="static2">static 2</div>
<div class="relative">relative</div>
<div class="absolute"><p><br>absolute</div>
<div class="sticky">sticky</div>
<div class="fixed">fixed</div>