z-index,
konumlandırma elemanları uygulanmış katmanların z-eksenindeki konumu belirlemek
için kullanılır.
z-index tüm
elemanlara uygulanamaz sadece konumlandırma değeri atanmış elemanlara
uygulanır. Bunun anlamı eğer bir elemanı aynı z-ekseni üzerinde üste veya alt
sıraya atmak istiyorsanız ilk olarak konumlandırma değeri atmalısınız.
z-index
değeri dokümanımızdaki elemanların istiflenme sıralarını belirler. z-index elemanları z-ekseninde
nerede duracağınız (üstte veya altta) belirler. z-indeks değeri küçük olan elemanlar altta büyük olan elemanlar ise
üstte görünecektir. Site kodlarken birçok yerde z-index ihtiyaç duyulmaz çünkü
normal sayfa akışında elemanlar yan yana durduğu için böyle bir özelliğe
ihtiyaç yoktur, elemanlara konumlandırma değeri tanımladığında elemanlar bir
biri üzerine bindiğinde z-index değerine ihtiyaç duyulur. z-index mutlak, göreceli ve
sabit konumlandırma atandığı veya elemana eksi değer verilerek konumu
değiştirildiğinde uygulanır.
1. Çerçevenin geçerli yığın bağlamında yığıt
seviyesi.
2. Çerçevenin bir yığın bağlamı oluşturup
oluşturmadığı.
Yapısı:
z-index:
<değer>
Aldığı
Değerler: <sayısal değer > | auto | inherit
Sayısal
değer
Bu sayısal değer üretilen çerçevenin geçerli yığın
bağlamındaki yığıt seviyesini belirtir. Çerçeve ayrıca kendi
yığıt
seviyesi '0' olan bir yerel yığın bağlamı oluşturur.
auto
Üretilen çerçevenin geçerli yığın
bağlamındaki yığıt seviyesi ebeveyninin yığıt
seviyesi ile aynıdır. Çerçeve ayrıca bir yerel yığın bağlamı oluşturmaz.
<!DOCTYPE html>
<html>
<head>
<style>
.pile { position: absolute;
left:
2cm; top: 2cm; width: 8cm;
height: 8cm;
}
</style>
</head>
<body>
<p>
<img id="image" class="pile"
src="butterfly.gif“
alt="Bir2kelebek2resmi"
style="z-index:1; font-size: 100%; color:magenta">
<div id="text1"
class="pile"
style="z-index: 3; font-size: 250%; color:lime">
<p style="position: relative; left: -1.5cm; top: -1.8cm">
Bu metin kelebek resminin önünde
olacak.</p>
</div>
<div id="text2"
class="pile"
style="font-size: 180%; color:orange">
<p style="position: relative; left: -1cm; top: 0.5cm">
Bu metin herşeyin<br>arkasında kalacaktır.</br>
</div>
<div id="text3"
class="pile"
style="z-index: 2; font-size: 200%; color:cyan">
<p style="position: relative; left: -0.5cm; top: -2cm">
Bu metin kelebek resminin önünde, yeşil
metnin arkasında kalacaktır.</p>
</div>
</body>
</html>
Hiç yorum yok:
Yorum Gönder