2010-08-21 29 views
6

IE7'de garip bir sorunla karşılaşıyorum. Birkaç noktada, pozisyonu olan mutlak bir pozisyonu olan bir DIV'm var (faux dropdown), arkasında pozisyonu olan bir şey olduğunda: göreceli olarak konumlandırılmış öğe diğer div boyunca gösterecektir. kesinlikle yerleştirilmiş öğe (ı üstte istediğim bir) 1000.position: göreceli olarak görünen konum: mutlak

http://skitch.com/louiswalch/dub5h/microsoft-windows-vista

+1

olası kopyaları [IE z-index relative/absolute bug (http://stackoverflow.com/questions/798482/ie-z-index-relative-absolute-bug-in-list) –

cevap

22

z-index seni şüpheli' sahipken

relativly konumlandırılmış öğe, herhangi bir z-endeksi ayarlanmamış ve daha önce denediniz, ancak ilk konum olarak z-index'u, konumlandırılmış elemanınızın z-index'undan daha düşük olan nispeten konumlandırılmış elemanınıza yerleştiriniz.

Bu işe yaramazsa, her iki öğenin de aynı stacking context içinde olduğundan emin olmanız gerekir. IE'de, bir öğeye position CSS kuralını uyguladığınızda, bu öğe içinde yeni bir yığınlama içeriği oluşturur. Bu, z-endeksinin sadece o elemanın çocuklarına ve diğer istifleme bağlamlarındaki çocuklara uygun şekilde saygı gösterileceği anlamına geliralt z indeksleri hala üstte olabilir.

Sizin durumunuzda, açılır menüyü ve düğmeyi aynı yığınlama bağlamına koymanız gerekir. veya Ayrı yığınlama bağlamlarını oluşturan 2 öğeye z indeksini uygulayın.

+0

Ahh spot Açık, sorun bu. Sorun, onları aynı istifleme dizinine koyabildiğimden emin değilim. Sitede, daha karmaşık bir yerleşime sahip olan ve göreceli konumlandırmaya sahip öğe, DOM'ın toplam farklı seviyesinde olan başka bir yerde oluyor. Bir z-endeksinden aşağıya doğru olan öğeyi o zaman üstündeki öğeyi vererek denedim ve yine de gösteriliyor. "Ayrı istifleme bağlamlarını oluşturan 2 öğeye z-indeksi uygular veya uygular." –

+7

Demek istediğim, bir "position" setiyle 2 ana öğeyi bulmanız (bunlar 2 ayrı yığınlama bağlamı yaratıyor) ve bunlara 'z-index 'ayarlamalısınız. Örneğin, düğmeniz "# content" adında bir kapsayıcıda yuvalanmışsa ve açılır listeniz # başlığındaysa, # lira {z-index: 1} ve # #header {z-index: 2} ' . "# Başlık" ve "# içerik" sağlanan aynı istifleme bağlamındadır, bu sorunu çözecektir. – Pat

İlgili konular