Главная страница>Учебник по веб-дизайну>Учебник по CSS

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

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

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

Конец

цитаты

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

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

Окно запуска кода

[Ctrl+A выбрать все советы: сначала вы можете изменить код]

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

Окно запуска кода

[Ctrl+A Все советы по выбору: сначала можно изменить часть кода]

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

Окно запуска кода

[Ctrl+A Советы по выбору: сначала вы можете изменить часть кода]

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

Окно запуска кода

[Ctrl+A выбрать все советы: сначала вы можете изменить код]

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

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

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

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


Окно запуска кода

[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, которые невозможно охватить. Это нештатные ситуации. Соответствующие статьи можно поискать самостоятельно.