Positioning
Sifat CSS positioning memungkinkan Anda untuk posisi elemen. Hal ini juga dapat menempatkan sebuah elemen belakang lain, dan menentukan apa yang harus terjadi bila konten elemen ini terlalu besar.
Elemen dapat diposisikan menggunakan bagian atas, bawah, kiri, dan sifat yang tepat. Namun, sifat ini tidak akan bekerja kecuali milik posisi diatur pertama. Mereka juga bekerja secara berbeda tergantung pada metode penentuan posisi.
Ada empat metode penentuan posisi yang berbeda.
Sifat CSS positioning memungkinkan Anda untuk posisi elemen. Hal ini juga dapat menempatkan sebuah elemen belakang lain, dan menentukan apa yang harus terjadi bila konten elemen ini terlalu besar.
Elemen dapat diposisikan menggunakan bagian atas, bawah, kiri, dan sifat yang tepat. Namun, sifat ini tidak akan bekerja kecuali milik posisi diatur pertama. Mereka juga bekerja secara berbeda tergantung pada metode penentuan posisi.
Ada empat metode penentuan posisi yang berbeda.
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.
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 Fixed
Sebuah elemen dengan posisi tetap diposisikan relatif terhadap jendela browser, dan tidak akan bergeubah:
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
Sebuah elemen dengan posisi tetap diposisikan relatif terhadap jendela browser, dan tidak akan bergeubah:
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
Positioning relatif
Sebuah posisi elemen relatif diposisikan relatif terhadap posisi normal:
p.right {
position: relatve;
left: 20px;
}
p.left {
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.
p.top {
position: relatve;
top: -50px;
}
Sebuah posisi elemen relatif diposisikan relatif terhadap posisi normal:
p.right {
position: relatve;
left: 20px;
}
p.left {
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.
p.top {
position: relatve;
top: -50px;
}
Positioning Absolute
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>:
{
position: absolute;
left: 100px;
top: 150px;
}
Elemen benar-benar diposisikan dikeluarkan dari aliran normal. Dokumen dan elemen lain berperilaku seperti elemen benar-benar diposisikan tidak ada.
diposisikan elemen dapat tumpang tindih elemen lainnya.
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>:
{
position: absolute;
left: 100px;
top: 150px;
}
Elemen benar-benar diposisikan dikeluarkan dari aliran normal. Dokumen dan elemen lain berperilaku seperti elemen benar-benar diposisikan tidak ada.
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 (elemen yang harus ditempatkan di depan, atau di belakang, yang lain).
Sebuah elemen dapat memiliki setumpuk perintah positif atau negatif:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Ketika elemen diposisikan di luar aliran normal, mereka dapat tumpang tindih elemen lainnya.
Properti z-index menentukan urutan tumpukan elemen (elemen yang harus ditempatkan di depan, atau di belakang, yang lain).
Sebuah elemen dapat memiliki setumpuk perintah positif atau negatif:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
0 komentar:
Posting Komentar