Hasil daripada membaca artikel ini, anda akan dapat mencipta div bertindih dengan CSS. Untuk tujuan ini, pertama, kita akan belajar tentang ' kedudukan ” dan “ indeks-z ” hartanah.
Mari kita mulakan!
Harta 'kedudukan' CSS
Dalam HTML, anda boleh menetapkan kedudukan elemen dengan menggunakan ' kedudukan ” harta benda. Kedudukan akhir elemen pada halaman web ditentukan oleh kanan, kiri, atas, bawah dan digabungkan dengan sifat indeks-z.
Sintaks
Sintaks sifat kedudukan ialah:
kedudukan : nilai
Di tempat ' nilai ”, anda boleh menetapkan kedudukan elemen yang berbeza seperti mutlak, relatif, tetap dan melekit.
Harta 'z-index' CSS
' indeks-z sifat ” digunakan untuk menetapkan susunan susunan elemen. Unsur yang mempunyai nilai indeks-z yang lebih besar diletakkan di hadapan yang lain.
Sintaks
Sintaks sifat indeks-z adalah seperti berikut:
indeks-z : auto |nomborDalam sintaks yang diberikan di atas, ' auto ' digunakan untuk menetapkan susunan mengikut elemen induk, manakala untuk urutan manual, ' nombor ” ditetapkan sebagai nilai sifat indeks-z.
Sekarang, mari kita beralih kepada contoh praktikal mencipta div bertindih dengan CSS.
Contoh 1: Bertindih Div Kedua Dengan Yang Pertama
Dalam bahagian HTML, kami akan mencipta dua div dan menetapkan nama kelas yang berbeza sebagai ' div1 ” dan “ div2 ”.
HTML
< badan >< div kelas = 'div1' >< / div >
< div kelas = 'div2' >< / div >
< / badan >
Sekarang, beralih ke CSS dan ikut arahan yang diberikan:
- Tetapkan nilai harta kedudukan sebagai “ mutlak ” untuk tempat div1 betul-betul tempat yang anda mahukan.
- Laraskan ketinggian dan lebar div1 sebagai “ 250px ” dan “ 300px ”.
- Nilai indeks z ditetapkan sebagai “ 1 ”.
- Tetapkan warna latar belakang div1 sebagai “ rgb(4, 3, 75) ”.
CSS
.div1 {kedudukan : mutlak ;
ketinggian : 250px ;
lebar : 300px ;
indeks-z : 1 ;
latar belakang : rgb ( 4 , 3 , 75 ) ;
}
Pengeluaran
Div pertama berjaya diletakkan. Sekarang, kita beralih ke div kedua.
Untuk bertindih div2, ikut arahan yang diberikan:
- Tetapkan nilai sifat kedudukan, lebar dan ketinggian div2 sama seperti ' div1 ”.
- Tetapkan nilai indeks z sebagai “ dua ” untuk meletakkannya di hadapan div pertama.
- Tetapkan warna latar belakang yang berbeza untuk div2 sebagai “ rgb(0, 204, 255) ”.
- Tetapkan margin div2 sebagai “ 50px ” sebagai nilai margin-atas dan margin-kiri.
- Tetapkan kelegapan div2 sebagai “ 0.7 ”.
CSS
.div2 {kedudukan : mutlak ;
lebar : 300px ;
ketinggian : 250px ;
indeks-z : 3 ;
latar belakang : rgb ( 0 , 204 , 255 ) ;
margin : 50px ;
kelegapan : 0.7 ;
}
Pengeluaran
Div2 berjaya bertindih dengan div1.
Jika anda ingin menetapkan div1 di atas div dua, anda hanya perlu menukar nilai z-index. Mari lihat contoh ini.
Contoh 2: Bertindih Div Pertama Dengan Yang Kedua
Dalam contoh ini, kita akan menukar nilai indeks z kedua-dua div. Di dalam ' .div1 ” kelas fail CSS, tetapkan nilai “ indeks-z ” harta sebagai “ dua ”:
indeks-z : dua ;Selepas itu, dalam ' .div2 kelas ”, tetapkan nilai “ indeks-z ” harta sebagai “ 1 ”:
indeks-z : 1 ;Akibatnya, div pertama akan diletakkan di hadapan div kedua:
Kami telah menyusun kaedah paling mudah untuk mencipta dua div bertindih dengan CSS.
Kesimpulan
' kedudukan ” dan “ indeks-z sifat ” digunakan untuk mencipta div bertindih dalam CSS. Secara lalai, nilai indeks-z ialah 1, yang menyatakan bahawa div yang baru dibuat akan diletakkan di hadapan div sedia ada. Walau bagaimanapun, anda boleh menentukan sebarang nilai mengikut keperluan anda untuk melaraskan jujukan bertindih. Dalam artikel ini, kami telah menawarkan kaedah untuk mencipta Div bertindih dengan CSS.