css блоки наезжают друг на друга

Задача:

Имеем три блока div, которым присвоено свойство float со значением left.

Эти блоки обтекают друг друга и выстраиваются в одну линию.

Но, если теперь начинать сужать окно браузера, то один блок переносится под другой, когда ему не хватает места в окне. Поэтому такие элементы (со свойством float) называют плавающими.

Но, что делать, если мы не хотим, чтобы эти блоки смещались друг под друга?

Прежде чем мы начнем, хочу сразу сказать, если вы не хотите разбираться во всех технических тонкостях работы с технологией CSS сами, можете обратиться ко мне на почту webgyry@gmail.com.

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

Решение здесь довольно простое. Нужно переназначить родителя для этих блоков и назначить ему фиксированную ширину.

По умолчанию, родителем для них является элемент body с шириной width:auto. Когда мы изменяли ширину окна браузера, изменялась и ширина элемента body.

Float работает следующим образом: если элементу с float не хватает места в родительском элементе, он переносится на новую строку. Это у нас и происходило.

Стоит только добавить новый родительский элемент с фиксированной шириной, как все встает на свои места:

Теперь, сколько бы мы не изменяли ширину окна браузера, блоки с float будут находиться на одной линии.

Будет только появляться горизонтальная полоса прокрутки.

На веб-странице расположены три изображения игральных карт (рис. 3.51). Пока они лежат рядом, их порядок значения не имеет, но если применить к ним позиционирование и сместить изображения так, чтобы они накладывались друг на друга, одна карта будет находиться выше другой (рис. 3.52).

Рис. 3.51. Карты рядом друг с другом

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Рис. 3.53. Воображаемые координаты веб-страницы

Пример 3.38. Обычный порядок карт

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

В CSS за положением по Z-оси отвечает свойство z-index , которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим. Элементам автоматически присваивается значение 0, так что даже z-index : 1 заставит элемент перекрывать все нижележащие. Доработаем пример 3.38 так, чтобы порядок карт поменялся на противоположный, причём только редактируя стиль, оставляя HTML-код прежним.

Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.

Свойство z-index работает только для элементов, у которых значение position задано как absolute , fixed или relative .

Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index , например 9999. Это гарантирует, что даже если в стилях и применяется z-index , он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10. Никаких скриптов здесь не понадобится, всё делается через псевдокласс :hover .

Пример 3.39. Изменение z-index при наведении на карту

(цифры для примера, Вам нужно будет установить свои значения для каждого div’a)

еще вариант: сделать для div’ов
float:left

тогда они будут автоматически подстраивать свою позицию так, чтобы не перекрывать друг друга.

Оцените статью