Урок с практикой по 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

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

<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно