Positioning

by mgiuffrida

HTML

<!-- position: static flows normally -->
<div class="red">static</div> 
<div class="green">static</div> 
<div class="blue">
    <div class="white">static</div>
</div> 

<!-- position: relative flows normally, but their "view"
stack can be translated w/out affecting surrounding elements -->
<div class="relative offsetTop red blackOutline">relative</div> 
<div class="relative green blackOutline">relative</div> 
<div class="relative offsetLeft blue blackOutline">
  <div class="white">relative</div>
  <div class="red absolute offsetLeft">abs</div>
  <div class="green">relative</div>
</div> 

<!-- position: absolute creates a new stack flow -->
<div class="absolute top right offsetTop red orangeOutline">absolute</div> 
<div class="absolute top right green orangeOutline">absolute</div> 
<div class="absolute top right offsetRight blue orangeOutline">
  <div class="white">absolute</div>
</div> 

<!-- unspecified offsets place the element where it would be, were it in the flow -->
<div class="absolute red pinkOutline">absolute 2</div>
<div class="absolute green offsetLeft pinkOutline">absolute 2</div>
<div class="absolute blue pinkOutline">absolute 2</div>

<div class="red cyanOutline"></div>
<div class="green cyanOutline"></div>
<div class="blue cyanOutline"></div>

<!--
<div class="fixed white top left"></div>
-->

CSS

div { height: 100px; width: 100px; }
div div { height: 50px; width: 50px; }

.red { background-color: #c00; }
.green { background-color: #0c0; }
.blue { background-color: #00c; }
.white { background-color: #fff; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

.top { top: 0;}
.left { left: 0; }
.right { right: 0;}

.offsetLeft { left: 80px; }
.offsetRight { right: 80px; }
.offsetTop { top: 80px; }

.blackOutline { border: 2px solid black; }
.orangeOutline { border: 2px solid orange; }
.pinkOutline { border: 2px solid pink; }
.cyanOutline { border: 2px solid cyan; }