Наложение элементов

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

img {

position: absolute;

width: 50%;

}

img:hover {

z-index: 1000;

}

...

<img src="Crataegus.jpg" alt="Crataegus" title="Crataegus" />

<img style="top: 10%; right: 0" src="Cypripedium C.jpg" alt="Cypripedium C" title="Cypripedium calceolus" />

<img style="top: 40%; right: 30%;" src="Cypripedium M.jpg" alt="Cypripedium M" title="Cypripedium macranthos Sw" />

Листинг 6.10. Наложение элементов. Применение свойства z-index (html, txt)

Рис. 6.10.  Наложение элементов

Упражнение. Измените порядок наложения изображений на противоположный, задав каждому из них атрибут z-index.

Упражнения.

• Поместите всплывающую подсказку а) в левый верхний угол изображения; б) ниже левого нижнего угла.

• Уберите встроенные стили у всех секций и установите свойство position в relative.

Вопросы

1. Перечислите типы позиционирования CSS.

2. Каковы правила размещения элементов в нормальном потоке?

3. Охарактеризуйте абсолютное позиционирования и область его применения.

4. Как задаётся позиционирование на основе плавающих элементов?

5. Для чего обычно применяется относительное позиционирование?

6. Как достичь центрирования элемента на странице по горизонтали и по вертикали?

7. Как работает фиксированное позиционирование?

8. Как можно регулировать порядок наложения элементов?

10