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

Введение

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

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

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

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

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

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

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

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

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

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

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

Похожие уроки Codebra

1. Используя свойства left, top, right и bottom попадите синим квадратом точно в центр красного по горизонтали.
2. То же самое, только по вертикали.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.