Bu makaleyi okuduktan sonra CSS ile örtüşen div'ler oluşturabileceksiniz. Bu amaçla öncelikle “ durum ' ve ' z-endeksi ' özellikleri.
Başlayalım!
CSS 'konum' Özelliği
HTML'de, ' öğesini kullanarak öğelerin konumunu ayarlayabilirsiniz. durum ' Emlak. Bir öğenin bir web sayfasındaki son konumu, sağ, sol, üst, alt ve z-endeksi özellikleriyle birlikte belirlenir.
Sözdizimi
Konum özelliğinin sözdizimi şöyledir:
durum : değer
Yerine ' değer ”, mutlak, göreli, sabit ve yapışkan gibi öğelerin farklı konumlarını ayarlayabilirsiniz.
CSS 'z-endeksi' Özelliği
“ z-endeksi ” özelliği, öğelerin yığın sırasını ayarlamak için kullanılır. Z-endeksi değeri daha büyük olan eleman diğerlerinin önüne yerleştirilir.
Sözdizimi
Z-index özelliğinin sözdizimi aşağıdaki gibidir:
z-endeksi : Oto |sayıYukarıda verilen sözdiziminde, ' Oto ”, ana öğeye göre sıra ayarlamak için kullanılırken, manuel sıralama için “ sayı ”, z-index özelliğinin değeri olarak ayarlanır.
Şimdi, CSS ile örtüşen div'ler oluşturmanın pratik örneğine geçelim.
Örnek 1: Birinci Div ile İkinci Div'i Örtüşme
HTML bölümünde iki div oluşturacağız ve farklı sınıf adlarını “ olarak atayacağız. bölüm1 ' ve ' div2 ”.
HTML
< gövde >< div sınıf = 'div1' >< / div >
< div sınıf = 'böl2' >< / div >
< / gövde >
Şimdi CSS'ye gidin ve verilen talimatları izleyin:
- Konum özelliğinin değerini “olarak ayarlayın. mutlak ” div1 yeri için tam olarak istediğiniz yer.
- Div1'in yüksekliğini ve genişliğini “olarak ayarlayın. 250 piksel ' ve ' 300 piksel ”.
- Z-endeksinin değeri “ 1 ”.
- Div1'in arka plan rengini “ olarak ayarlayın. rgb(4, 3, 75) ”.
CSS
.div1 {durum : mutlak ;
yükseklik : 250 piksel ;
Genişlik : 300 piksel ;
z-endeksi : 1 ;
arka fon : rgb ( 4 , 3 , 75 ) ;
}
Çıktı
İlk div başarıyla yerleştirildi. Şimdi ikinci div'e geçiyoruz.
Div2'yi üst üste getirmek için verilen talimatları izleyin:
- Div2'nin konum özelliğinin, genişliğinin ve yüksekliğinin değerini “ ile aynı şekilde ayarlayın. bölüm1 ”.
- Z-endeksinin değerini “olarak ayarlayın. iki ” ilk div'in önüne yerleştirmek için.
- Div2 için farklı bir arka plan rengi ayarlayın “ rgb(0, 204, 255) ”.
- Div2'nin kenar boşluğunu “olarak ayarlayın. 50 piksel ” kenar boşluğu üst ve kenar boşluğu değeri olarak.
- div2'nin opaklığını “olarak ayarlayın. 0.7 ”.
CSS
.div2 {durum : mutlak ;
Genişlik : 300 piksel ;
yükseklik : 250 piksel ;
z-endeksi : 3 ;
arka fon : rgb ( 0 , 204 , 255 ) ;
kenar boşluğu : 50 piksel ;
opaklık : 0.7 ;
}
Çıktı
Div2, div1 ile başarıyla örtüşüyor.
Div1'i div iki'nin üstüne ayarlamak istiyorsanız, z-endeksinin değerini değiştirmeniz yeterlidir. Bunun bir örneğini görelim.
Örnek 2: Birinci Div ile İkinci Div'i Örtüşme
Bu örnekte, her iki div'in z-endeksinin değerini değiştireceğiz. İçinde ' .div1 ” CSS dosyasının sınıfı, “ değerini ayarlayın z-endeksi ” olarak mülk” iki ”:
z-endeksi : iki ;Bundan sonra, “ .div2 ” sınıfı, “ değerini ayarlayın z-endeksi ” olarak mülk” 1 ”:
z-endeksi : 1 ;Sonuç olarak, ilk div ikinci div'in önüne yerleştirilecektir:
CSS ile iki örtüşen div oluşturmanın en kolay yöntemini derledik.
Çözüm
“ durum ' ve ' z-endeksi ” özelliği, CSS'de örtüşen div'ler oluşturmak için kullanılır. Varsayılan olarak, z-endeksinin değeri 1'dir; bu, yeni oluşturulan div'in mevcut div'in önüne yerleştirileceğini belirtir. Ancak, örtüşen sırayı ayarlamak için gereksinimlerinize göre herhangi bir değer belirleyebilirsiniz. Bu yazımızda CSS ile örtüşen Div'ler oluşturma yöntemlerini sunduk.