Tasarımcıların korkulu rüyası Internet Explorer’ın hatalarından birine rastgeldim bugün. Tek isteğim j-query kullanarak basit açılır menüler yapmaktı. Firefox’da mis gibi çalışan kod Explorer 6 da dağıttı. Temelde bu işlem gizlenmiş bir elemanın “display” özelliği değiştirilerek kolaylıkla yapılıyor. Menünün herşeyin üstünde çıkması için ise “z-index” özelliği diğer tüm elemanlardan yüksek olmalı ve tabii ki menünün yan tarafta açılması için “postition” özelliği “absolute” olmalı. Sorun, menünün üstte açılması gereken yerin tam altında bir başka bir “absolute” ile pozisyonlanmış bir elemanın olması. Aslında aynı sorun “relative” ile pozisyonlanmış elemanlarda da oluyor. Explorer bu elemanların hepsine kafadan bir “z-index” vermekle kalmıyor, bir de ebeveyn elemanın “z-index”ini çocuk eleman ne kadar yırtınsa da geçemiyor. Ebeveyn eleman başka bir elemanın altındaysa yani, sizin çocuk onların altında kalıyor. Neyse sorun şu yani:
Aynı sorun Explorer 7′de de devam ediyor. Çözüm için biraz araştırma yaptığımda sunulan çözümlerin çoğunun çalışmadığını gördüm. Türkçe bir yerde vardı sorun onda da çözüm yoktu. Çözüm için ilk akla gelen şey, üstte gözükecek elemana hayvani bir “z-index” vermek. Ama bu, dediğim gibi, ebeveyn elemanın baskın olmasından dolayı patlıyor. Yani buna ek olarak, ebeveyn elemana da hayvani ama çocuk elemandan daha fazla olmayacak bir “z-index” verilmeli. Mesela çocuğa 9999, ebeveyne 9998 gibi. Umarım yardımcı olur.
Orijinal çözümü şu sayfada verilen yorumların birinde gördüm.
ENGLISH VERSION:
In order to overcome z-index problem in Internet Explorer, one should give the element which sould appear on top a high z-index. This may not work, however if the element is nested in another element which is absolutely or relatively positioned. Thus one should also give the parent element a high z-index, not higher than the child element of course. Original solution is mentined in here among the comments.