Вход Регистрация
ruen

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

Для того, чтобы разместить элемент на странице, необходимо указать его координаты, то есть задать позицию. Координаты могут задаваться различными способами, относительно того или иного объекта. В CSS для этого есть специальное свойство – position. Оно предназначено для установки способа позиционирования элемента относительно чего-либо, например, окна браузера или прочих объектов на странице.

css-position-values

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

Комментарии (0)
Для комментирования войдите или зарегистрируйтесь.
Оставить заявку

Последние статьи

Популярные разделы

Eqsash (Инструменты)

Приложение для Android - VK LAST USER ID, отучитель от зависимости и т.д.:
Доступно в Google Play

Amessage (Общение)

Вход в веб-версию
Приложение для Android:
Доступно в Google Play

Поделиться

Подписаться

YouTube

Книги

IT-заметки - Простым языком о самом нужном (HTML, CSS, JavaScript, PHP, базы данных, Drupal, Битрикс, SEO, домены, безопасность и другое), PDF, 500 стр.