# left property

The `left` property specifies a position of the left edge of an element. Values ​​for the property can be written in common size units, such as pixels, inches, points, percentages. The specified values ​​can also be negative numbers, in this case the elements will overlap one another. The coordinate reference is determined by the `position` property, which usually takes the `relative` (relative position) value or `absolute` (absolute position).

## Syntax

`selector { left: size or auto; }`

## Example

Let's when hovering over a child element set its left border position to `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; }`

:

## Example

Now let the left border of the child element be positioned at `-50px` on hover:

`<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; }`

:

## See also

- the `bottom` property
  that specifies a position of an element bottom edge
- the `top` property
  that specifies a position of an element top edge
- the `right` property
  that specifies a position of an element right edge
- the `::backdrop` pseudo-element
  that specifies a position after the first element
- the `caption-side` property
  that specifies a position of a table header

← →
↑
en ru