Demo CSS Position

by Taufik Nurrohman

HTML

<div class="static">1. Static</div>
<div class="static">2. Static</div>
<div class="relative">3. Relative</div>
<div class="absolute">4. Absolute</div>
<div class="fixed">5. Fixed</div>
<div>6. Default</div>
<div class="static">7. Static</div>

CSS

body {
  border-left:10px dashed darkgreen;
  background-color:green;
  height:1000px;
  padding-left:40px;    
}

div {
  width:150px;
  background-color:#ccc;
  border:1px solid black;
  border-left-width:4px;
  font:bold 22px/100px Arial,Sans-Serif;
  color:black;
  text-align:center;
}

.static {
  position:static;
}

.relative {
  position:relative;
  top:20px;
  left:20px;
}

.absolute {
  position:absolute;
  top:20px;
  left:120px;
}

.fixed {
  position:fixed;
  bottom:20px;
  right:20px;
}