Управление позицией элемента на странице, CSS-свойство position
Для того, чтобы разместить элемент на странице, необходимо указать его координаты, то есть задать позицию. Координаты могут задаваться различными способами, относительно того или иного объекта. В CSS для этого есть специальное свойство – position. Оно предназначено для установки способа позиционирования элемента относительно чего-либо, например, окна браузера или прочих объектов на странице.
Какие значения есть у свойства position? Перечислим ниже:
- absolute - задает, что элемент позиционирован абсолютно, другие элементы не замечают такой элемент, отображаются так, как будто его нет на странице. Для задания положения элемента используются следующие свойства: left, top, right и bottom. Важно заметить, что на положение элемента влияет также значение свойства position родительского элемента;
- fixed – данное значение по своему принципу работы похоже на значение absolute, но координаты привязываются к указанной точке на экране и не меняются при прокрутке страницы – то есть элемент зафиксирован в одной точке;
- relative - положение элемента задается относительно его исходного места, при попытке изменить координаты, элемент просто сдвигается на указанные значения;
- sticky – задает липкое позиционирование элемента, его можно рассматривать как гибрид относительного и фиксированного позиционирования;
- static – задает отображение элементов на странице, как обычно. В данном случае использование свойства left, top, right и bottom не дают никаких результатов;
- inherit – данное свойство наследует значение родительского элемента;
- initial - применяется для установки исходного значения свойства;
- unset - является комбинацией ключевых слов initial и inherit.
Как видно, если использовать некоторые значения position, тогда необходимо применять специальные свойства для смены позиции элемента: left, top, right, bottom. Значения для этих свойств задаются обычно в пикселях – px. Это необходимо для следующих значений: absolute, fixed, relative, sticky. В других случаях для позиционирования элемента следует использовать свойства семейства margin.
Таким образом, используя различные значения свойства position, можно добиться правильного расположения элемента на странице.
Последние статьи
- ИТ / Разное 08.07.21 Как бесплатно сделать перевод для сайта без API, перевод документов в Google Translate
- ИТ / Разное 06.07.21 Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку
- Еда / Разное 06.07.21 Как быстро приготовить вкусные жаренные пирожки с картошкой и луком
- ИТ / Разное 04.07.21 Кэширование - создание, загрузка и сброс. Где хранить кэш, способы и виды кэширования
- ИТ / Базы данных 03.07.21 Свой NoSQL - хранение данных в файлах и не только в базе данных. Хранение настроек, небольших данных и файлов кеширования