Позиционирование элементов на веб-странице с помощью свойства CSS Position

May 9, 2024

До каскадных таблиц стилей у вас был ограниченный контроль над положением объектов на вашей веб-странице. Вы можете использовать HTML-таблицу для небольшого управления позиционированием, но это не очень точно. Теперь с помощью CSS вы можете точно контролировать, как каждый элемент размещается на вашей веб-странице.

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

Ширина и высота браузера
Сначала вы можете подумать, что это относится к открытому окну браузера. Но это действительно относится ко всему браузеру, включая элементы управления и кнопки.
Живая Ширина и Высота
Это термин для области отображения браузера. Не включает в себя элементы управления.
Ширина и высота документа
Это вся ширина и высота вашей веб-страницы. Если эти размеры больше, чем ширина и высота в реальном времени, браузер будет отображать полосы прокрутки по мере необходимости.

Теперь, когда вы знаете термины для границ, в которых вы можете позиционировать части вашей веб-страницы с помощью CSS, давайте посмотрим на четыре значения позиции.

статический
Это по умолчанию. Если для элемента не указано иное, браузер будет использовать статическое позиционирование. Как это ни звучит, при статическом позиционировании вы не можете перемещать элементы на веб-странице. Так как же браузер определяет, куда поместить каждый объект на вашей веб-странице? Он размещает каждый элемент в том порядке, в котором они встречаются в вашем HTML-коде. Если у вас есть изображение логотипа, затем приветствие, а затем уведомление об авторских правах в вашем HTML, браузер разместит их на веб-странице в указанном порядке. Вы не можете переместить приветствие над изображением логотипа.
Родственник
Относительное позиционирование работает так же, как и статическое, в том порядке, в котором порядок элементов в коде HTML контролирует поток элементов на странице. Тем не менее, вы можете использовать относительное позиционирование для управления положением элемента по отношению к другим элементам на веб-странице.
абсолют
Когда вы используете абсолютное позиционирование с элементом, это сделает этот элемент независимым от остальной части веб-страницы. Поскольку его размещение больше не определяется порядком HTML, вам нужно будет использовать координаты X и Y для позиционирования элемента.
Исправлена
Это работает так же, как абсолютное позиционирование. Однако элемент с фиксированным позиционированием не будет прокручиваться вместе с веб-страницей. Это хорошая функция для логотипа или меню, которое вы хотите оставить видимым при прокрутке страницы вверх.

Видео инструкция: HTML и CSS - позиционирование элементов. Работа со свойством position (May 2024).

Позиционирование элементов на веб-странице с помощью свойства CSS Position, HTML, CSS, CSS свойство position, статического позиционирования, относительного позиционирования, абсолютного позиционирования, фиксированного позиционирования, способа позиционирования элементов на веб-странице, использования CSS для позиционирования элементов на веб-странице.

Предыдущая статья

Следующая статья

Обзор членства в Adobe Plus

May 2024

Если вы поклонник Adobeр Photoshopр Элементы или Премьерар Элементы, вы захотите взглянуть на Plus, который дает вам доступ к постоянно растущей библиотеке знаний и ресурсов. Просто посмотрите на...

компьютеры

Пользовательская Заставка Осень Хэллоуин для iMac

May 2024

Теперь, когда наконец наступил октябрь, я решил сделать заставку Осень / Хэллоуин для моего iMac. Это так же просто, как разместить ваши любимые фотографии в папке.В зависимости от вашей версии, iMac...