# Свойство left

Свойство `left` задает левого края элемента. Значения для свойства можно записать с общепринятыми единицами размеров, например, в пикселях, дюймах, пунктах, процентах. Задаваемые значения могут быть и отрицательными числами, в этом случае элементы будут накладываться один на другой. Отсчет координат определяется свойством `position`, которое обычно принимает значение `relative` (относительное положение) или `absolute` (абсолютное положение).

## Синтаксис

`селектор { left: размер или auto; }`

## Пример

Давайте при наведении на дочерний элемент установим ему позицию левой границы равную `25px`:

`<div id="elem"> <p></p> </div>` `#elem { width: 400px; height: 300px; border: 1px solid black; } p { position: relative; width: 100px; height: 100px; border: 1px solid red; margin-left: 50px; } p:hover { left: 25px; width: 100px; height: 100px; border: 1px solid red; }`

:

## Пример

А теперь пусть при наведении левая граница дочернего элемента будет расположена на `-50px`:

`<div id="elem"> <p></p> </div>` `#elem { width: 400px; height: 300px; border: 1px solid black; } p { position: relative; width: 100px; height: 100px; border: 1px solid red; margin-left: 50px; } p:hover { left: -50px; width: 100px; height: 100px; border: 1px solid red; }`

:

## Смотрите также

- свойство `bottom`,
  которое задает позицию нижнего края элемента
- свойство `top`,
  которое задает позицию верхнего края элемента
- свойство `right`,
  которое задает позицию правого края элемента
- псевдоэлемент `::backdrop`,
  который задает расположение после первого элемента

← →
↑
en ru