Sebagai hasil dari membaca artikel ini, Anda akan dapat membuat div yang tumpang tindih dengan CSS. Untuk itu, pertama-tama kita akan mempelajari tentang “ posisi ' dan ' indeks-z ” properti.
Mari kita mulai!
Properti 'posisi' CSS
Dalam HTML, Anda dapat mengatur posisi elemen dengan memanfaatkan ' posisi ' Properti. Posisi akhir elemen pada halaman web ditentukan oleh kanan, kiri, atas, bawah, dan dalam kombinasi dengan properti indeks-z.
Sintaksis
Sintaks dari properti posisi adalah:
posisi : nilai
Di tempat “ nilai ”, Anda dapat mengatur berbagai posisi elemen seperti absolut, relatif, tetap, dan lengket.
Properti 'z-index' CSS
' indeks-z Properti ” digunakan untuk mengatur urutan tumpukan elemen. Elemen yang memiliki nilai indeks-z lebih besar ditempatkan di depan elemen lainnya.
Sintaksis
Sintaks properti z-index adalah sebagai berikut:
indeks-z : mobil |nomorDalam sintaks yang diberikan di atas, “ mobil ” digunakan untuk mengatur urutan sesuai dengan elemen induk, sedangkan untuk urutan manual, tanda “ nomor ” ditetapkan sebagai nilai properti indeks-z.
Sekarang, mari beralih ke contoh praktis membuat div yang tumpang tindih dengan CSS.
Contoh 1: Tumpang Tindih Div Kedua Dengan Div Pertama
Di bagian HTML, kita akan membuat dua div dan menetapkan nama kelas yang berbeda sebagai “ div1 ' dan ' div2 ”.
HTML
< tubuh >< div kelas = 'div1' >< / div >
< div kelas = 'div2' >< / div >
< / tubuh >
Sekarang, pindah ke CSS dan ikuti instruksi yang diberikan:
- Tetapkan nilai properti posisi sebagai “ mutlak ” untuk tempat div1 persis tempat yang Anda inginkan.
- Sesuaikan tinggi dan lebar div1 sebagai “ 250px ' dan ' 300px ”.
- Nilai indeks-z diatur sebagai “ 1 ”.
- Atur warna latar belakang div1 sebagai “ rgb(4, 3, 75) ”.
CSS
.div1 {posisi : mutlak ;
tinggi : 250px ;
lebar : 300px ;
indeks-z : 1 ;
Latar Belakang : rgb ( 4 , 3 , 75 ) ;
}
Keluaran
Div pertama berhasil ditempatkan. Sekarang, kita pindah ke div kedua.
Untuk tumpang tindih div2, ikuti instruksi yang diberikan:
- Atur nilai properti posisi, lebar, dan tinggi div2 sama dengan “ div1 ”.
- Tetapkan nilai indeks-z sebagai “ dua ” untuk menempatkannya di depan div pertama.
- Atur warna latar belakang yang berbeda untuk div2 sebagai “ rgb(0, 204, 255) ”.
- Atur margin div2 sebagai “ 50px ” sebagai nilai margin-top dan margin-left.
- Atur opacity div2 sebagai “ 0,7 ”.
CSS
.div2 {posisi : mutlak ;
lebar : 300px ;
tinggi : 250px ;
indeks-z : 3 ;
Latar Belakang : rgb ( 0 , 204 , 255 ) ;
batas : 50px ;
kegelapan : 0,7 ;
}
Keluaran
Div2 berhasil tumpang tindih dengan div1.
Jika Anda ingin mengatur div1 di atas div dua, Anda hanya perlu mengubah nilai indeks-z. Mari kita lihat contoh ini.
Contoh 2: Tumpang Tindih Div Pertama Dengan Div Kedua
Dalam contoh ini, kita akan mengubah nilai indeks-z dari kedua div. Dalam ' .div1 ” kelas file CSS, atur nilai “ indeks-z ” properti sebagai “ dua ”:
indeks-z : dua ;Setelah itu, dalam “ .div2 ”, atur nilai dari “ indeks-z ” properti sebagai “ 1 ”:
indeks-z : 1 ;Akibatnya, div pertama akan ditempatkan di depan div kedua:
Kami telah menyusun metode termudah untuk membuat dua div yang tumpang tindih dengan CSS.
Kesimpulan
' posisi ' dan ' indeks-z Properti ” digunakan untuk membuat div yang tumpang tindih di CSS. Secara default, nilai z-index adalah 1, yang menyatakan bahwa div yang baru dibuat akan ditempatkan di depan div yang ada. Namun, Anda dapat menentukan nilai apa pun sesuai dengan kebutuhan Anda untuk menyesuaikan urutan yang tumpang tindih. Dalam artikel ini, kami telah menawarkan metode untuk membuat Div yang tumpang tindih dengan CSS.