Elemen dapat tumpang tindih!
Posisi
Posisi statis
Posisi Tetap
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.
Semua CSS Positioning Properti
Nomor dalam kolom “CSS” menunjukkan di mana CSS versi properti didefinisikan (CSS1 atau CSS2).
bottom = Mengatur tepi margin bawah untuk kotak diposisikan
clip = Klip elemen benar-benar diposisikan
cursor = Menentukan jenis kursor yang akan ditampilkan
left = Mengatur tepi margin kiri untuk kotak diposisikan
overflow = Menentukan apa yang terjadi jika konten meluap kotak elemen yang
position = Menentukan jenis posisi untuk suatu elemen
right = Mengatur tepi margin kanan untuk kotak diposisikan
top = Mengatur tepi margin atas untuk kotak diposisikan
z-index = Mengatur urutan tumpukan elemen