Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

Изменяем свойствами left, top, right и bottom положение элемента

Введение

Сместить элемент по условным осям координат можно при помощи свойств left, top, right и bottom. Для их использования, необходимо, чтобы элемент был позиционированным, т.е. значение свойства position для него было отлично от static. Что делают эти свойства:

  • left – отображает расстояние, на которое будет смещен элемент от левого края, в сторону правого.
  • top – отображает расстояние, на которое будет смещен элемент от верхнего края, в сторону нижнего.
  • right – отображает расстояние, на которое будет смещен элемент от правого края, в сторону левого.
  • bottom – отображает расстояние, на которое будет смещен элемент от нижнего края, в сторону верхнего.

В случае если задано отрицательное число, то элемент будет смещаться в противоположную сторону. Далее рассмотрим синтаксис:

Код CSS
left: размер | проценты | auto
top: размер | проценты | auto
right: размер | проценты | auto
bottom: размер | проценты | auto

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

Если для элемента свойство position задано как absolute

В данном случае родительским элементом является окно браузера, т.е. отсчет начинается от его краев. Если для свойства top задать 10%, то элемент сместится на 10% вниз от окна браузера.

Если для элемента свойство position задано как relative

В таком случае элемент будет смещаться относительно своего исходного положения. Если для свойства right задать 25px, то элемент сместится влево на 25 пикселей, относительного того места, на котором он находился.

Если для элемента свойство position задано как absolute, а для родителя – relative

Теперь элемент будет изменять свое положение относительно родительского блока.

<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.