Пять правил суперпозиции

Автор：Eve Cole Время обновления：2009-06-12 17:53:18

[Браузеры, участвующие в тесте: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[Операционная система: Windows]

Кажется, что многие студенты одержимы проблемой, почему этот div находится на верхнем уровне, а этот div на нижнем слое, и как бы они ни устанавливали z-индекс, они не могут получить наверх Они страдают от рвоты и диареи, тошноты и бессонницы и в конечном итоге впадают в депрессию. Не стесняйтесь использовать наложения слоев. Однако эффект суперпозиции слоев часто возникает в интерактивном дизайне, поэтому мы должны его контролировать. Чтобы контролировать его, мы должны освоить его законы.

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

статическое позиционирование: позиция:статическая (значение атрибута позиции по умолчанию).
Динамическое позиционирование: положение: относительное или положение: абсолютное или положение: фиксированное.
Элемент-предок: любой элемент, содержащий этот элемент.
Родительский элемент: элемент-предок, который непосредственно содержит этот элемент.
Родственные элементы: элементы, имеющие общий родительский элемент.

Примечание. Эти концепции изменены автором и используются только в этой статье.

Цитата:

Элемент «одноранговый узел» — очень ключевое слово, и здесь его необходимо подробно объяснить.

<дел>
<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>

В этом примере div#a и div#b не являются «родственными элементами». Только такие элементы, как div#b и div#c, имеющие один и тот же родительский элемент div#f, можно называть «родственными элементами».

Конец

цитаты

Давайте посмотрим на эти пять правил :

Правило 1: Когда одноуровневые элементы расположены одинаково и нет настройки z-индекса, HTML-код будет размещен поверх последнего.

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

Правило 3. Если однородные элементы расположены по-разному, динамически размещайте их вверху.

Правило 4: Если элементы, не являющиеся родственными, любой из них и его элемент-предок не имеют динамического макета, HTML будет иметь приоритет.

Правило 5 : [Важно] Если любой из неродственных элементов или его родительский элемент имеет динамическое позиционирование, одновременно найдите динамически позиционируемый родительский элемент вверх и удалите родительский элемент самого высокого уровня (или сам себя) для сравнение. .

Случай 1: независимо от того, насколько велик z-индекс дочернего элемента, больший родительский элемент будет первым.

Случай 2: родительский элемент размещается внизу, а дочерний элемент также может быть размещен вверху.

Случай 1 и случай 2 объединены расширенным сравнением.

Окно запуска кода
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>Правило 5: Неродственные элементы, любой из них или его предок Когда элемент имеет динамическое позиционирование, он ищет вверх динамически позиционируемый родительский элемент и извлекает родительский элемент самого высокого уровня (или самого себя) для сравнения. </title> </head> <style type="text/css"> div {font:12px/1.5 arial;} divstrong {color:#fff;background:#036;display:inline-block;} h3strong { color:#f00;} /*--- Определите форму блока ---*/ .div1, .div2 { height:70px; width:150px; background:#cff; border:1px Solid #036; .grandDiv1, .grandDiv2 { заполнение: 10 пикселей; ширина: 1 пиксель #060; фон: #cf9; #fcf; } /*--- Определите позицию смещения квадрата и позицию текста ---*/ .grandDiv2 { Margin-top:-50px; Margin-left:95px } .parentDiv2 { Margin-top:-40px; -left: 85 пикселей; } .div2 { поля-вверх:-20 пикселей; поля-вверх: 30 пикселей; высота: 40 пикселей; } .grandDiv2 .parentDiv2, .grandDiv2 .div2, .parentDiv2 .div2 { поля: 0;} </style> <body> <h3>Правило 5<strong>(Важно)</strong>: когда любой из неродственных элементов или его родительский элемент имеет динамическое позиционирование, каждый из них будет искать одновременно найдите динамически позиционируемый элемент-предок на следующий уровень элемента-предка и извлеките элемент-предок самого высокого уровня (или самого себя) для сравнения. </h3> <p>Случай 1: Независимо от того, насколько велик z-индекс дочернего элемента, больший родительский элемент будет первым. <p> <div class="parentDiv1" style="position:relative; z-index:2;"> .parentDiv1{position:relative;<strong>z-index:2</strong>} <div class=" div1">.div1{position:static</div> </div> <div class="parentDiv2" style="position:relative; z-index:1;"> <div class="div2" style=" позиция:relative; z-index:10000;">.div2{position:relative;<strong>z-index:10000</strong></div> .parentDiv2{position:relative;<strong>z-index: 1</strong>} </div> <p>Случай 2: родительский элемент находится внизу, а дочерний элемент также может быть вверху. <p> <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative;">.div1{position:relative</div> </div> < div class="parentDiv2"> <div class="div2">.div2{position:staitc</div> .parentDiv2{position:staitc} </div> <p>Случай 1 и случай 2 в сочетании с расширенным сравнением. <p> <div class="grandDiv1" style="position:relative; z-index:3;"> .grandDiv1{position:relative;<strong>z-index:3</strong>} <div class=" parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong ></div> </div> </div> <div class="grandDiv2"> <div class="parentDiv2" style="position:relative; z-index:4;"> <div class="div2 ">.div2{position:staitc</div> .parentDiv2{position:relative;<strong>z-index:4</strong>} </div> .grandDiv2{position:static;} </div> < /body></html>
[Ctrl+A Все советы по выбору: сначала можно изменить часть кода]

Цитата:

На самом деле первые четыре пункта — это основы, только пятый пункт сложнее понять. Вот подробное объяснение:

В этом примере мы сравниваем каскадные отношения между div#a_inner5 и div#b_inner4.
Вплоть до следующего уровня общего элемента-предка div#ab, элементы-предки div#a_inner5 включают в себя: div#a, div#a_inner1, div#a_inner2, div#a_inner3, div#a_inner4 - предка div#b_inner4; К элементам относятся: div#b,div#b_inner1,div#b_inner2,div#b_inner3.
Затем проанализируйте элементы с динамическим позиционированием среди элементов-предков: элементы с динамическим позиционированием среди элементов-предков div#a_inner5: div#a, div#a_inner3; элементы с динамическим позиционированием среди элементов-предков div#b_inner4: div# b_inner3.
Затем извлеките самый высокий уровень для сравнения: div#a > #div#b_inner3.

Когда родительский элемент находится внизу, а дочерний элемент также может быть вверху, используется неродственный элемент. Когда элемент-предок имеет динамический макет, его сравнение не имеет ничего общего с положением: статическим, а связано с его предком. элемент можно сравнить по позиции html.

Конец цитаты

Конечно, иногда бывают особые случаи, такие как flash и select в IE6, которые невозможно охватить. Это нештатные ситуации. Соответствующие статьи можно поискать самостоятельно.