Css Z-index Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te z-index özelliğini öğreneceğiz.Html etiketlerini konumlandırırken bazen bu etiketler üst üste gelebiliyor.Bu gibi durumlarda üst üste gelen etiketlerden hangisinin üstte hangisinin altta kalmasını istiyorsak bunu z-index özelliği ile yapabiliyoruz.Z-index özelliği sayısal değerler alır.Büyük değere sahip etiket üstte, küçük değere sahip etiket ise altta konumlandırılır.

Dikkat : Eğer üst üste gelen etiketler için z-index özelliğini kullanarak düzenleme yapmazsak son yazılan etiket en üstte görünecektir.

Dikkat : z-index özelliği, etiketlerin konumlandırılmasını sadece şu değerler ile yaptığımızda çalışacaktır.

      ► position:absolute

      ► position:relative

      ► position:fixed

Şimdi 2 adet <div> oluşturalım ve position değerlerine absolute verelim.Top ve left özellikleri ile bu etiketlerin üst üste gelmesini sağlayalım.Z-index değerleri vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-z-index-kullanimi-1

css-dersleri-z-index-kullanimi-2

Gördüğünüz gibi verdiğimiz z-index değerlerine göre değişim gösteriyor.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 16 – Box Model (Kutu Modeli)

Sonraki : Css Dersleri 18 – Float ve Clear Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +