Bermain-main dengan Css Positioning

Salah satu fungsi css yg penting itu positioning sob.. Margin, padding, top, left, right, bottom, position, dan z-index itu adalah contoh dari fungsi positioning dalam css .

Nah untuk z-index contohnya klik ajah facebox di atas,

text bisa tumpuk, dalam arti jadi background gitu...
css nya seperti ini,
.element { font-size:75px; position:absolute; }
#element-1 { color:black; z-index:1; }
#element-2 { color:white; margin:30px 0 0 30px; z-index:2; }
#element-3 { color:black; margin:60px 0 0 60px; z-index:3; }
#element-4 { color:white; margin:90px 0 0 90px; z-index:4; }
#element-5 { color:black; margin:120px 0 0 120px; z-index:5; }
#element-6 { color:white; margin:150px 0 0 150px; z-index:6; }


Z-index dsni digunakan untuk mengatur posisi text, z-index 1 paling bawah, 2 lebih atas, 3 lebih atasnya lagi, dan seterusnya begitu..

Gmn cara pake nya ? yah biasalah sob.. kyk begini,

<div id="element-1" class="element">Bermain</div>
<div id="element-2" class="element">main</div>
<div id="element-3" class="element">dengan</div>
<div id="element-4" class="element">css</div>
<div id="element-5" class="element">positioning</div>
<div id="element-6" class="element">cuy..</div>

trus kalo yg miring itu css nya sperti ini

#rotate {
float:left;
font-size:150px;
-webkit-transform: rotate(-45deg); -moz-transform:rotate(-45deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Untuk derajat nya bisa dirubah sesuai selera kok..
cara pake nya yah sama dong..
<div id="rotate">
Tulisan nya miring nih..
</div>

nah gitu lah sekilas tentang z-index dan rotation.. lumayan lah .