Tutorial CSS Posisi

Tentukan elemen untuk menampilkan di depan!
Elemen dapat tumpang tindih!

Posisi

Sifat posisi CSS memungkinkan Anda untuk posisi elemen. Hal ini juga dapat menempatkan sebuah elemen belakang lain, dan menentukan apa yang harus terjadi bila konten elemen terlalu besar.Elemen dapat diposisikan menggunakan bagian atas, bawah, kiri, dan sifat yang tepat. Namun, sifat tidak akan bekerja kecuali milik posisi set pertama. Mereka juga bekerja berbeda tergantung pada metode penentuan posisi.Ada empat metode penentuan posisi yang berbeda.

Posisi statis

Elemen HTML statis diposisikan secara default. Sebuah elemen diposisikan statis selalu diposisikan sesuai dengan aliran normal halaman.Elemen diposisikan statis tidak terpengaruh oleh bagian atas, bawah, kiri, dan sifat yang tepat

Posisi Tetap

Sebuah elemen dengan posisi tetap diposisikan relatif terhadap jendela browser.Ini tidak akan bergerak bahkan jika jendela sam:

p.pos_fixed

{
position:fixed;
top:30px;
right:5px;
}

Catatan: IE7 dan IE8 mendukung nilai tetap hanya jika DOCTYPE ditetapkan!.

Elemen diposisikan tetap dikeluarkan dari aliran normal. Dokumen dan elemen
lainnya berperilaku seperti elemen diposisikan tetap tidak ada.

Elemen diposisikan tetap dapat tumpang tindih elemen lainnya.

Posisi relatif

Sebuah elemen diposisikan relatif diposisikan relatif terhadap posisi normal.

h2.pos_left

{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Isi dari elemen yang relatif diposisikan dapat dipindahkan dan tumpang tindih elemen lainnya,
tetapi ruang dicadangkan untuk elemen tersebut masih dipertahankan dalam aliran normal.

h2.pos_top
{
position:relative;
top:-50px;
}

Elemen diposisikan relatif sering digunakan sebagai blok kontainer untuk elemen benar-benar diposisikan.

Posisi Absolut

Sebuah elemen posisi absolut diposisikan relatif terhadap elemen induk pertama yang memiliki posisi lain selain statis. Jika ada unsur seperti itu ditemukan, blok yang mengandung <html>:

h2
{
position:absolute;
left:100px;
top:150px;
}

Benar-benar diposisikan elemen dihapus dari aliran normal. Dokumen dan elemen lain berperilaku
seperti benar-benar diposisikan elemen tidak ada.

Benar-benar diposisikan elemen elemen lainnya dapat saling tumpang tindih.

Elemen Tumpang Tindih

Ketika elemen diposisikan di luar aliran normal, mereka dapat tumpang tindih elemen lainnya.

Properti z-index menentukan urutan tumpukan suatu elemen (elemen yang harus ditempatkan di depan, atau belakang, yang lain).

Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif:

img

{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

Elemen Tumpang Tindih

Ketika elemen diposisikan di luar aliran normal, mereka dapat tumpang tindih elemen lainnya.

Properti z-index menentukan urutan tumpukan suatu elemen (elemen yang harus ditempatkan di depan,
atau belakang, yang lain).

Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif:

Mengatur bentuk elemen
Contoh ini menunjukkan bagaimana untuk mengatur bentuk dari suatu elemen. Unsur ini dipotong menjadi bentuk ini, dan ditampilkan.

Bagaimana menampilkan overflow dalam suatu elemen menggunakan gulir
Contoh ini menunjukkan bagaimana untuk mengatur properti melimpah untuk membuat bar gulir apabila isi elemen terlalu besar untuk muat dalam area tertentu.

Cara mengatur browser untuk secara otomatis menangani meluap
Contoh ini menunjukkan bagaimana untuk mengatur browser untuk secara otomatis menangani meluap.

Ubah kursor
Contoh ini menunjukkan bagaimana mengubah kursor.