Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

156. Изменяем свойствами 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

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

Похожие уроки и записи блога

Добавляем градиент к фону элементаЦвета и фон
Погружение в PythonЗнакомство с Python
Свойство background для работы с фономЦвета и фон
Свойство z-index для определения уровня элементаПозиционирование
Первое знакомство с PythonЗнакомство с Python
Форматирование строк в PythonЗнакомство с Python
Свойство border для создания границОтступы, рамки, поля
Обработка исключений (try/except) в PythonЗнакомство с Python
Позиционирование элементов свойством positionПозиционирование
<
×
>
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

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

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

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

Закрыть окно