Главная
Ключевые направления
Прочие публикации
Мои проекты
Услуги
Отзывы
Контакты
Акции
Личные кабинеты

Позиционирование

Возможность позиционирования блоков с точностью до пикселя появилась вместе со спецификацией CSS-P, которая затем вошла в спецификацию CSS2. Одновременно с внедрением CSS-P Netscape ввела элемент LAYER, но его поддержка реализована только в Netscape Navigator.

Изначально единственным инструментом точного размещения элементов относительно друг-друга была таблица, но с внедрением CSS-P точность размещения появилась и относительно границ страницы.

CSS-P добавляет ещё одно измерение, которое позволяет элементам накладываться друг на друга. При этом порядком наложения блоков можно управлять, а сами блоки проявлять.

Координаты и позиционирование

    CSS-P имеет 2 системы координат:
  • абсолютная;
  • относительная.

Все элементы страницы попавшие под другие становятся недоступны посетителю, поэтому и координаты и линейные размеры блоков важны в равной степени.

Абсолютная система координат

В абсолютной системе координат точка отсчёта расположена в левом верхнем углу родительского блока, ось X направлена вправо, а ось Y — вниз.

    Для определения расположения блока в абсолютной системе координат его атрибуту position необходимо присвоить значение absolute, а координаты его верхнего левого угла управляются атрибутами:
  • left — X;
  • top — Y.

Относительная система координат

Относительная система координат аналогична абсолютной, но  точка отсчёта расположена в точке размещения блока по умолчанию.

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

Для определения расположения блока в относительной системе координат его атрибуту position необходимо присвоить значение relative.

В любой системе координат атрибуты left и top могут иметь отрицательное значение.

Управление видимостью

    На видимость элемента влияет атрибут visibility, который может принимать значения:
  • hidden — скрытый;
  • visible — видимый.

Отображать на странице блок можно не целиком, а только частично. За эту возможность отвечает атрибут clip.

В Internet Explorer атрибут clip интерпретируется только при бсолютном позиционировании элемента, а в Netscape Navigator система координат значения не имеет.

Порядок наложения блоков

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

Атрибут z-index может принимать отрицательные значения.

Обновлено: 0:38 04.09.2019

Назад

Поиск
Расширенный поиск
©Tumaliev R.