Элементы перекрытия текста в элементах выпадающего списка

Question

Эй, у меня есть этот случай, если страница содержит текст и текст содержит список UL с некоторыми элементами, те элементы LI будут перекрывать элементы в выпадающем меню, а затем пользователь скользит вниз по выпадающему списку.

Я думал, что исправил это, добавив следующее в Div вокруг моего выпадающего списка.

position:relative; z-index:999999; 

Давая мне

#source-programs-dd { overflow: auto; background: #fff; max-height: 198px; position:relative; z-index:999999;} 

И это работает везде IE7 Любые идеи, за исключением?

Answer 1

Чтобы помочь вам решить ваш вопрос, мне нужно будет увидеть ваши HTML и CSS. Но в целом IE7 имеет известную проблему с z-index и как он вычисляет z-index для дочерних элементов.

В этой проблеме есть несколько вопросов, связанных с Stackoverflow. Вот некоторые, которые могли бы помочь:

IE7 Z-Index issue - Context Menu

expanding the menu appearing underneath the gallery in IE7

Основная идея заключается в том, что в IE7, г-индекс рассчитывается на родительский элемент братьев и сестер. Это звучит немного странно, так что здесь не пример:

<div id="parent1">...</div> 
<div id="parent2">...</div> 

Если .parent1 есть что-то вроде меню UL, который перекрывается .parent2, это может быть возможно, что .parent2 появляется перед этим содержанием независимо от того, что z- index любой дочерний элемент .parent1 имеет.

Это потому, что IE7 сравнивает z-индекс .parent1 и .parent2 и заставит все дочерние элементы наследовать их значение в некотором смысле. (дочерние элементы фактически получают свой собственный z-индексный контекст, связанный друг с другом, но дети других родительских элементов находятся под влиянием их родителя в первую очередь по отношению к ребенку других родителей)

Решение состоит в том, чтобы найти 2 элемента, которые вызывают проблему и обнаруживают, где они разделяют родительские элементы, которые являются братьями и сестрами друг друга.

Затем примените соответствующий z-индекс для этих элементов.

.parent1{ z-index:10; } 
.parent2{ z-index:1; } 

Если вы публикуете свой HTML-код, я могу попытаться найти вашу точную проблему.

Cheers!