IE7 z-index Hatası ve Çözümü

IE7'ye uygun tasarımlar dökmeye çalışıyorsanız, bu tarz sorunlarla muhakkak karşılaşıyorsunuzdur.. Bir türlü z konumunu yükselttiğiniz değer bir diğer nesnenin üzerine çıkmıyordur.. Bu sorunun sebebi z-index verdiğiniz nesnenin üst nesnelerinden birisine position uygulamanızdan kaynaklıdır. Yani bu mantıkla baktığımızda IE7 z-index uygulanacak nesnenin üst nesnelerinde position olmasını kabul etmiyor. Küçük bir örnek vermek gerekirse;

Burada hakkımda menüsünün üzerine gelince açılan bir alt menüsü mevcut.. Şuan tüm tarayıcılarda arama kutusu açılan menünün üzerine çıkmış durumda.. Şimdi z-index değerini açılan ul nesnesine verelim.. Örneğin z-index: 1 ekleyip deneyelim;

Evet şuan IE7 hariç diğer tüm tarayıcılarda (muhtemelen) açılır menü yukarıya çıktı. Ancak IE7'de ne hikmetse hala altta :) Bunun sebebi en başta da dediğim gibi ul'nin üst nesnesi olan li'de position değeri olmasından kaynaklanıyor. Burada li'nin position değerini silemeyeceğimize göre ul'ye verdiğimiz z-index değerini li'ye vermemiz gerekecek. Yani IE7 ve diğer tarayıcılar için uyumlu hali;