Управление позицией элемента на странице, CSS-свойство position

19.08.18 CSS 1133

Для того, чтобы разместить элемент на странице, необходимо указать его координаты, то есть задать позицию. Координаты могут задаваться различными способами, относительно того или иного объекта. В 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, можно добиться правильного расположения элемента на странице.