CSS Absolute Positioning

Absolute positioning merupakan suatu attribute CSS yang digunakan untuk mengatur posisi suatu elemen secara bebas, relatif terhadap element induk terdekat yang telah keluar dari aliran normal dokumen. Ketika suatu elemen diposisikan secara Absolute, maka elemen tersebut akan keluar dari aliran normal dokumen dan membentuk layer baru bersama elemen-elemen turunannya. Kemudian dari layer baru ini, terbentuk sistem penempatan elemen baru yang tidak terpengaruh oleh elemen encestor (elemen induk) maupun elemen sibling (elemen yang mempunyai induk yang sama). Untuk menempatkan absolute elemen kita memerlukan attribute offset (top, bottom, left, right) dan apabila kita tidak menentukan attribute ini, maka elemen tersebut akan ditempatkan di pojok atas kiri dari elemen induknya. Sedangkan untuk aliran normal dokumen sebelumnya akan menganggap bahwa elemen yang diposisikan secara absolute sudah tidak ada lagi dan digantikan oleh elemen yang di dalam urutan markup berada di bawahnya. Seperti tampak pada gambar di bawah ini :

contoh:

.div{
position: absolute;
top: 30px;
left: 30px;
background-color: #e4e4e4;
border: 1px dashed #aaa;
}

source: http://iznyn.com

Tambahan:
Absolute artinya Semaunya sendiri… bisa juga menggunakan elemen z-index
z-index:-1 artinya dia akan berada dibelakang [semakin negetif akan semakin dibelakang…semakin positif semakin di depan]

Design page layout using CSS

Page layout and CSS code
Before you proceed, it’s useful to have an idea about page’s sections. I suggest to use this layout (2 column fixed size):

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

/*
div.spacer, solve an issue with #container height
in css 2 column layout.
*/

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; height:24px;}

Source: http://woork.blogspot.com

Footer CSS Bottom Alignment

terkadang kita menginkinkan suatu footer div, dimana harus selau berada di layar browser, di berapapun ukuran layar dan resolusi nya. berikut ini dalah contih mudahnya untuk css tersebut:

#footer{
height:34px;
position:fixed;
bottom:0px;
z-index:1;
float:left;
background:#000;
}

keterangan:

position:fixed;
bottom:0px;
z-index:1;

ke tiga elemen tersebut adalah yg terpenting