ie6/7?da postion:relative Uygulanmış Elemanlarda z-index Sorunu

Bu sorunla neredeyse 4-5 kere karşılaşmışımdır. En son yaptığım projede karşılaşınca yazmaya karar verdim.

Sorunu açıklamaya çalışayım; postion:relative uyguladığımız elemanların(li) içinde postion:absolute kullanarak eklediğimiz elemanlar sıralı elemanlarının altında kalıyor.

Genelde bu durumla liste(li) elemanı içinde üzerine gelince açılan bir alan(menü) açtırmak istediğimizde karşılaşıyoruz.

Basit bir örnek ile durumu gösterelim.

01
.anaKatman {

02
 position: relative;

03
 width: 300px;

04
 border: 1px solid black;

05
}

06

07
.acilanBolum {

08
 position:absolute;

09
 left:0;

10
 width: 150px;

11
 border: 1px solid red;

12
 background: gray;

13
 z-index: 1000;

14
}

HTML kısmı

01
<div class="anaKatman">

02
 <div class="acilanBolum">

03
 Curabitur dapibus lacus elit. Maecenas nec ligula ipsum. Vivamus  accumsan sollicitudin augue, vel sollicitudin mi varius sed. Proin in  erat sit amet dolor tincidunt scelerisque eget nec felis. Curabitur  dapibus lacus elit. Maecenas nec ligula ipsum.

04
 </div>

05
Lorem ipsum dolor sit amet,  consectetur adipiscing elit. Curabitur non diam sit amet erat facilisis  ultrices id vel turpis. Etiam pulvinar arcu ac felis pretium mollis.  Etiam augue orci, iaculis non mollis et, venenatis vel ipsum.

06
</div>

07

08
<div class="anaKatman">

09
 Pellentesque  sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per  inceptos himenaeos. Integer imperdiet dictum interdum.

10
</div>

11
<div class="anaKatman">

12
 Pellentesque  sodales vehicula dictum. Nulla facilisi. Integer eget lectus eros.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per  inceptos himenaeos. Integer imperdiet dictum interdum.

13
</div>

Örneği görmek için tıklayınız.

Firefox?da yukarıdaki gibi sorunsuz görünüyor.

Üstte kalmasını istediğimiz katmana(acilanBolum) z-index:1000 değeri vermemize rağmen alttaki katmanın altında kalmaktadır İnternet explorer 6 ve 7 sürümlerinde.

Çözüm için aşağıdan yukarı doğru artan z-index değerleri yazılmalıdır. Ben ardışık z-index değerleri atayarak yapıyorum bunu. Sırası ile z-index:1, z-index:2 ve z-index:3 değerlerini atıyorum aşağıdan yukarı doğru. Eğer araya bir eleman girme ihtimali varsa aralıklı verin değerleri 10, 20, 30 gibi.

HTMl kodunu aşağıdaki gibi değiştirince sorun çözüldü.

01
<div class="anaKatman" style="z-index:3">

02
<div class="acilanBolum">

03
 Curabitur  dapibus lacus elit. Maecenas nec ligula ipsum. Vivamus accumsan  sollicitudin augue, vel sollicitudin mi varius sed. Proin in erat sit  amet dolor tincidunt scelerisque eget nec felis. Curabitur dapibus lacus  elit. Maecenas nec ligula ipsum.

04
</div>

05
Lorem ipsum dolor sit amet,  consectetur adipiscing elit. Curabitur non diam sit amet erat facilisis  ultrices id vel turpis. Etiam pulvinar arcu ac felis pretium mollis.  Etiam augue orci, iaculis non mollis et, venenatis vel ipsum.

06
</div>

07

08
<div class="anaKatman" style="z-index:2">

09
Pellentesque sodales vehicula  dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti  sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  Integer imperdiet dictum interdum.

10
</div>

11
<div class="anaKatman" style="z-index:1">

12
Pellentesque sodales vehicula  dictum. Nulla facilisi. Integer eget lectus eros. Class aptent taciti  sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.  Integer imperdiet dictum interdum.

13
</div>

Örneği görmek için tıklayınız.

Kaynaklar

Kaynak : CSS Dersleri, Fatih HAYRİOĞLU