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 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.
Ö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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #box1{ width:200px; height:200px; background-color:red; position:absolute; z-index:2; } #box2{ width:200px; height:200px; background-color:blue; position:absolute; top:80px; left:80px; z-index:1; } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #box1{ width:200px; height:200px; background-color:red; position:absolute; z-index:1; } #box2{ width:200px; height:200px; background-color:blue; position:absolute; top:80px; left:80px; z-index:2; } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> </html> |
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.
