Position pada CSS

CSS Position berguna untuk menempatkan element yang kita buat dalam CSS. Contoh saja kamu ingin meletakan sebuah widget dipojok kanan atas, maka yang digunakan adalah Property ini

Dalam Property Position pada CSS terdapat 5 Positioning, yaitu :

Position Static

Elemen HTML diposisikan statis dengan default. Unsur diposisikan statis selalu diposisikan sesuai dengan aliran normal halaman.

Elemen diposisikan statis tidak terpengaruh oleh bagian atas, bawah, kiri, dan sifat yang tepat.

Penulisan : position:static;

Position Fixed

Position Fixed akan membuat element melayang mengikuti scroll keatas ataupun kebawah, tempat-nya tidak akan berubah dan berpindah.

Contoh :




Itu berarti element akan melayang jika di scroll dengan jarak 30px dari atas dan 5px dari kanan.

Penulisan : position:fixed;

Position Relative

Position relative ini bisa kita ubah ubah penempatannya sesuka hati kita dengan property 
top:value; 
right:value; 
bottom:value; 
left:value; 

Penggunaan Property adalah jarak dari elemen yang berada diatas-nya

Contoh : 

Position Absolute

Jika position Relative adalah jarak antara element diatasnya, kalau position absolute adalah jarak antara CSS yang kita buat dengan Layar/monitor kita

Contoh :




Oke... Sekian dulu tutorial kali ini... Semoga bisa difahami, jika kurang faham bisa ditanyakan di kolom komentar ^_^
Wassalamu'alikum WR.WB.