Управление позицией элемента на странице, 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, можно добиться правильного расположения элемента на странице.
Последние статьи
- 09.07.22ИТ / Разное Конвертация офисных файлов DOC, DOCX, DOCM, RTF в форматы DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT без потерь и изменения разметки
- 07.07.22ИТ / Безопасность Как защитить исходный код PHP, JS, HTML, CSS - обфускация, минимизация, сжатие и шифрование
- 06.07.22ИТ / Безопасность Подключение не защищено, проблема с Lets Encrypt - как исправить истекший 30.09.2021 DST Root CA X3, удалить его вручную и установить ISRG Root X1. Пример на MS Windows 7
- 08.07.21ИТ / Разное Как бесплатно сделать перевод для сайта без API, перевод документов в Google Translate
- 06.07.21ИТ / Разное Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку