Порядок отображения элементов: свойство z-index
| Синтаксис: | z-index: auto | <целое> | inherit | | Начально: | auto | | Применимо: | к позиционированным элементам | | Наследуемо: | нет | | Проценты: | не используются | | Устройства: | визуальные |
| Поддержка : |  | Соответствует стандарту (4.0+) | | |  | Поддерживается только для слоев (layers) (4.0+) |
Как уже отмечалось выше, позиционирование элементов часто приводит к тому, что объемлющие прямоугольники нескольких элементов перекрываются, т. е. при отображении эти элементы накладываются друг на друга. При этом элементы образуют стек, расположенный по оси координат Z. Чем больше индекс элемент в стеке, тем выше он расположен, т. е. лучше видим пользователем. Элементы с одинаковым индексом располагаются по обычному правилу наполнения стека: чем раньше элемент расположен в тексте документа, тем глубже он находится.
Свойство z-index позволяет явно задать индекс элемента в этом стеке и тем самым управлять порядком наложения элементов друг на друга при отображении. Оно может принимать следующие значения:
| <целое> | Явно задает индекс элемента в стеке. | | auto | Индекс элемента принимается равным индексу его отца. |
В следующем примере текст абзаца расположен в документе раньше графического образа, но путем задания свойства z-index мы помещаем его поверх рисунка.
<DIV style="position: relative; top: 0; left: 0; width: 100%; height: 60px">
<P style="position: absolute; top: 10px; left: 100px; z-index: 2;
background: purple; color: white">Текст</P>
<IMG src="images/leaf.gif" style="position: absolute; top: 10px; left: 100px;
z-index: 1">
</DIV>
Приведенный фрагмент будет отображаться так (Netscape Navigator 4.x отображает этот пример неверно!):
Текст 
Плавающие элементы: свойство float
| Синтаксис: | float: left | right | none | inherit | | Начально: | none | | Применимо: | ко всем элементам, кроме позиционированных и генерируемого оглавления | | Наследуемо:нет | | Проценты: | не используются | | Устройства: | визульные |
| Поддержка : | | Соответствует стандарту (4.0+) | | | | Соответствует стандарту; реализовано с ошибками (4.0+) |
Свойство float со значением left или right указывает, что элемент является плавающим и задает его выравнивание влево или вправо. По умолчанию это свойство имеет значение none, что означает, что элемент не является плавающим.
Плавающий элемент всегда считается блочным, т. е. его свойство display игнорируется. Плавающий элемент смещается влево или вправо до тех пор, пока не встретит рамку, заполнитель или границу другого блочного элемента. Элементы, следующие за плавающим элементом, сдвигаются относительно его позиции и как бы обтекают его соответственно справа или слева (см. также описание свойства clear). Так, использование плавающих абзацев позволяет выводить их бок о бок, например (Netscape Navigator 4.x отображает этот пример неверно!):
Это абзац, выровненный влево.
А это абзац, выровненный вправо.
Для вывода этого примера использован следующий фрагмент:
<P style="float: left; width: 50%">Это абзац, выровненный влево.</P>
<P style="text-align: right"> А это абзац, выровненный вправо.</P>
Плавающий элемент должен иметь явно заданную ширину. Она задается либо свойством width, либо самим элементом, если это, к примеру, графический образ.
В следующем примере абзац состоит из текста и двух плавающих графических образов, выровненных соответственно влево и вправо:
<P>
<IMG src="images/left.gif" alt="Стрелка влево" style="float: left">
<IMG src="images/right.gif" alt="Стрелка вправо" style="float: right">
Это текст абзаца, который будет расположен между плавающими образами.
</P>
Этот фрагмент будет отображаться так (Netscape Navigator 4.x отображает его неверно!):
 
Это текст абзаца, который будет расположен между плавающими образами.
Управление обтеканием текста: свойство clear
| Синтаксис: | clear: none | left | right | both | inherit | | Начально: | none | | Применимо: | к блочным элементам
| | Наследуемо:нет | | Проценты: | не используются | | Устройства: | визульные |
| Поддержка : | | Соответствует стандарту (4.0+) | | | | Соответствует стандарту; реализовано с ошибками (4.0+) |
Свойство clear указывает, как данный элемент не может обтекать предыдущий плавающий элемент. Он может принимать следующие значения:
| none | Разрешает обтекание плавающего элемента с обеих сторон. | | left | Запрещает обтекание плавающего элемента слева. | | right | Запрещает обтекание плавающего элемента справа. | | both | Запрещает обтекание плавающего элемента с обеих сторон. |
Запрет обтекания означает, что данный элемент должен отображаться ниже предыдущего плавающего элемента. По умолчанию это свойство равно none, т. е. разрешает обтекание плавающего элемента с обеих сторон. Модифицируем пример из предыдущего раздела, чтобы продемонстрировать применение этого свойства:
<P>
<IMG src="images/left.gif" alt="Стрелка влево" style="float: left">
<IMG src="images/right.gif" alt="Стрелка вправо" style="float: right">
Это текст абзаца, который будет расположен между плавающими образами.
<SPAN style="clear: both">Этот текст будет выведен ниже остального фрагмента.</SPAN>
</P>
Этот фрагмент будет отображаться так (Netscape Navigator 4.x отображает этот пример неверно!):
Это текст абзаца, который будет расположен между плавающими образами. Этот текст будет выведен ниже остального фрагмента.
1 2 3 4
8 8 8
| |
*
Обратная связь