CSS Positioning
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Positioning bisa rumit kadang-kadang!
Tentukan elemen untuk menampilkan di depan!
Elemen dapat tumpang tindih!
positioning
Sifat CSS posisi memungkinkan Anda untuk posisi elemen. Hal ini juga dapat menempatkan sebuah elemen belakang lain, dan menentukan apa yang harus terjadi bila konten elemen yang terlalu besar.
Elemen dapat diposisikan menggunakan bagian atas, bawah, kiri, dan sifat yang tepat. Namun, sifat ini tidak akan bekerja kecuali milik posisi diatur terlebih dahulu. Mereka juga bekerja berbeda tergantung pada metode penentuan posisi.
Ada empat metode penentuan posisi.
Positioning statis
Elemen HTML diposisikan statis secara 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.
Positioning tetap
Sebuah elemen dengan posisi tetap diposisikan relatif terhadap jendela browser.
Ini tidak akan bergerak bahkan jika jendela sam:
contoh
p.pos_fixed {
position: fixed;
top: 30px;
kanan: 5px;
}
Cobalah sendiri »
Catatan Catatan: IE7 dan IE8 mendukung nilai tetap hanya jika DOCTYPE ditentukan!.
Tetap elemen diposisikan dikeluarkan dari aliran normal. Dokumen dan elemen lainnya berperilaku seperti elemen diposisikan tetap tidak ada.
Tetap elemen diposisikan dapat tumpang tindih elemen lainnya.
Positioning relatif
Seorang kerabat diposisikan elemen diposisikan relatif terhadap posisi normal.
contoh
h2.pos_left {
position: relative;
kiri: -20px;
}
h2.pos_right {
position: relative;
kiri: 20px;
}
Cobalah sendiri »
Isi dari elemen yang relatif diposisikan dapat dipindahkan dan tumpang tindih elemen lainnya, tetapi ruang dicadangkan untuk elemen tersebut masih dipertahankan dalam aliran normal.
contoh
h2.pos_top {
position: relative;
top: -50px;
}
Cobalah sendiri »
Elemen yang relatif diposisikan sering digunakan sebagai blok kontainer untuk elemen benar-benar diposisikan.
Positioning mutlak
Sebuah elemen posisi absolut diposisikan relatif terhadap elemen induk pertama yang memiliki posisi lain selain statis. Jika ada unsur tersebut ditemukan, blok yang berisi adalah <html>:
contoh
h2 {
position: absolute;
kiri: 100px;
top: 150px;
}
Cobalah sendiri »
Elemen benar-benar diposisikan dikeluarkan dari aliran normal. Dokumen dan elemen lainnya berperilaku seperti elemen benar-benar diposisikan tidak ada.
Benar-benar diposisikan elemen dapat tumpang tindih elemen lainnya.
Tumpang Tindih Elements
Ketika elemen diposisikan di luar aliran normal, mereka dapat tumpang tindih elemen lainnya.
Properti z-index menentukan urutan tumpukan elemen (unsur mana harus ditempatkan di depan, atau belakang, yang lain).
Sebuah elemen dapat memiliki setumpuk urutan positif atau negatif:
contoh
img {
position: absolute;
kiri: 0px;
top: 0px;
z-index: -1;
}
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Positioning bisa rumit kadang-kadang!
Tentukan elemen untuk menampilkan di depan!
Elemen dapat tumpang tindih!
positioning
Sifat CSS posisi memungkinkan Anda untuk posisi elemen. Hal ini juga dapat menempatkan sebuah elemen belakang lain, dan menentukan apa yang harus terjadi bila konten elemen yang terlalu besar.
Elemen dapat diposisikan menggunakan bagian atas, bawah, kiri, dan sifat yang tepat. Namun, sifat ini tidak akan bekerja kecuali milik posisi diatur terlebih dahulu. Mereka juga bekerja berbeda tergantung pada metode penentuan posisi.
Ada empat metode penentuan posisi.
Positioning statis
Elemen HTML diposisikan statis secara 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.
Positioning tetap
Sebuah elemen dengan posisi tetap diposisikan relatif terhadap jendela browser.
Ini tidak akan bergerak bahkan jika jendela sam:
contoh
p.pos_fixed {
position: fixed;
top: 30px;
kanan: 5px;
}
Cobalah sendiri »
Catatan Catatan: IE7 dan IE8 mendukung nilai tetap hanya jika DOCTYPE ditentukan!.
Tetap elemen diposisikan dikeluarkan dari aliran normal. Dokumen dan elemen lainnya berperilaku seperti elemen diposisikan tetap tidak ada.
Tetap elemen diposisikan dapat tumpang tindih elemen lainnya.
Positioning relatif
Seorang kerabat diposisikan elemen diposisikan relatif terhadap posisi normal.
contoh
h2.pos_left {
position: relative;
kiri: -20px;
}
h2.pos_right {
position: relative;
kiri: 20px;
}
Cobalah sendiri »
Isi dari elemen yang relatif diposisikan dapat dipindahkan dan tumpang tindih elemen lainnya, tetapi ruang dicadangkan untuk elemen tersebut masih dipertahankan dalam aliran normal.
contoh
h2.pos_top {
position: relative;
top: -50px;
}
Cobalah sendiri »
Elemen yang relatif diposisikan sering digunakan sebagai blok kontainer untuk elemen benar-benar diposisikan.
Positioning mutlak
Sebuah elemen posisi absolut diposisikan relatif terhadap elemen induk pertama yang memiliki posisi lain selain statis. Jika ada unsur tersebut ditemukan, blok yang berisi adalah <html>:
contoh
h2 {
position: absolute;
kiri: 100px;
top: 150px;
}
Cobalah sendiri »
Elemen benar-benar diposisikan dikeluarkan dari aliran normal. Dokumen dan elemen lainnya berperilaku seperti elemen benar-benar diposisikan tidak ada.
Benar-benar diposisikan elemen dapat tumpang tindih elemen lainnya.
Tumpang Tindih Elements
Ketika elemen diposisikan di luar aliran normal, mereka dapat tumpang tindih elemen lainnya.
Properti z-index menentukan urutan tumpukan elemen (unsur mana harus ditempatkan di depan, atau belakang, yang lain).
Sebuah elemen dapat memiliki setumpuk urutan positif atau negatif:
contoh
img {
position: absolute;
kiri: 0px;
top: 0px;
z-index: -1;
}
Tidak ada komentar:
Posting Komentar