Css Z-index Kullanımı

Bu yazımızda 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.

 Önemli  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.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın