[Браузеры, участвующие в тесте: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2] Похоже, что многие студенты смущены тем, почему этот Div находится на верхнем уровне, и что Div находится на нижнем уровне. , заставляя вас не использовать суперпозицию слоев. Однако эффект суперпозиции слоев часто появляется в интерактивном дизайне, поэтому мы должны контролировать его. Во -первых, давайте проясним несколько концепций, которые необходимо использовать в статье : Статическое позиционирование: положение: статическое (значение по умолчанию свойства позиции). Динамическое позиционирование: положение: относительное или положение: абсолютно или позиция: фиксировано. Элемент предка: любой элемент, который содержит элемент. Родительский элемент: элемент предка, который напрямую содержит элемент. Элемент сверстника: элемент с общим родительским элементом. Примечание. Эти концепции настроены автором и используются только в этой статье. Цитировать: Элемент сверстника - очень критическое слово, и его нужно подробно объяснить здесь. <div> В этом примере Div#A и Div#B не являются «одновременными элементами». Конец цитаты Давайте посмотрим на эти пять правил : Правило 1: Когда метод позиционирования элементов сверстников одинаковы, и нет настройки z-индекса, HTML полагается на последнее. Запустите кодовое поле Правило 2: Когда одни и те же элементы расположены динамически расположены, и существует настройка z-индекса, то, что имеет наибольшее значение Z-индекса, является верхней. Запустите кодовое поле Правило 3: Методы позиционирования элементов сверстников различны, а динамическое позиционирование является главным приоритетом. Запустите кодовое поле Правило 4: Когда не-симультские элементы, любые и их наследственные элементы не имеют динамической планировки, HTML полагается на последнее. Запустите кодовое поле Правило 5 : [Важно] Когда любой из несмулжных элементов имеет динамическое позиционирование, каждый из них будет искать динамическое позиционирование наследственных элементов вверх, и каждый из них вынесет самый высокий уровень наследственных элементов (или самих себя) для сравнения . Случай 1: Независимо от того, насколько велик Z-индекс дочернего элемента, тем больше родительский элемент. Случай 2: родительский элемент ниже, а дочерний элемент также может быть выше. Случай 1, случай 2 в сочетании с расширенным сравнением. Запустите кодовое поле Цитировать: На самом деле, первые четыре момента являются основными, и только пятый пункт трудно понять. <div id = "ab" style = "позиция: Absolute;"> В этом примере давайте сравним каскадную связь между DIV#A_INNER5 и DIV#B_INNER4. Когда родительский элемент ниже, а дочерний элемент также может быть выше, это связано с тем, что, когда нереарный элемент используется для динамического расположения элемента предка, его сравнение не имеет ничего общего с позицией: статический, но его предок может быть элемент сравнивался через HTML. Конец цитаты Конечно, иногда есть особые случаи, такие как Flash, и выберите в IE6, которые не могут быть заблокированы.
[Операционная система: Windows]
<div> </div>
<div id = "a"> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div id = "f">
<div> </div>
<div id = "b"> </div>
<div id = "c"> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
[CTRL+A All SIVEST: Сначала вы можете изменить некоторые коды]
[CTRL+A All SIVEST: Сначала вы можете изменить некоторые коды]
[CTRL+A All SIVEST: Сначала вы можете изменить некоторые коды]
[CTRL+A All SIVEST: Сначала вы можете изменить некоторые коды]
[CTRL+A All SIVEST: Сначала вы можете изменить некоторые коды]
<div id = "a" style = "позиция: относительно; z-index: 100;">
<div id = "a_inner1">
<div id = "a_inner2">
<div id = "a_inner3" style = "Положение: относительно; z-index: 98;">
<div id = "a_inner4">
<div id = "a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id = "b">
<div id = "b_inner1">
<div id = "b_inner2">
<div id = "b_inner3" style = "Положение: относительно; z-index: 99;">
<div id = "b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>
До следующего уровня предка элемента Div#ab, элементы предка Div#a_inner5 включают: Div#A, Div#A_INNER1, DIV#A_INNER2, DIV#A_INNER3, DIV#A_INNER4; Div#B, Div#b_inner1, div#b_inner2, div#b_inner3.
Затем проанализируйте их наследственные элементы, которые имеют динамическое позиционирование: Div#A_INNER5 Elements, которые содержат динамическое позиционирование: Div#A, Div#A_INNER3;
Затем выберите самый высокий уровень, чтобы сравнить: Div#A>#Div#B_INNER3.