Left edge of element
left
Explicitly set the left edge of the element.
Property values
This property has different interpretations, depending upon the element's position property.
| position | interpretation |
|---|---|
| static | This property is ignored. |
| relative | Shifts the normal flow-of-text position by the given amount. Positive values shift it inside the element's left boundary. Negative values shift it outside the element's left boundary. |
| fixed | Sets the left edge of the element to be the given amount inside the left edge of the browser's viewport. |
| absolute | Sets the left edge of the element to be the given amount inside the left edge of the ancestor's viewport, but only if that ancestor has a position that is relative, fixed or absolute. |
| sticky | Follows the rules for relative until the left value is scrolled to. After that, follows the rules for fixed and uses the given value as a fixed amount from the browser's left edge. |
Units
Use any of these font-relative typographic units to set the left:
| em | em | The font-size of the current font |
| rem | relative em | The font-size of the <html> element |
| ch | "0" | The advance measure (the width) of the current font's "0" glyph |
| ic | ideograph count | The advance measure (the width) of the current font's "水" ideograph |
Or use any of these fixed size units which are independent of the current font:
| % | percent | A percentage of the parent element's width |
| in | inch | A size equal 96px |
| px | pixels | A size equal to 1/96 inch |
| pt | point | A size equal 1in/72 = 1.33px |
| pc | pica | A size equal 1in/6 = 12pt = 16px |
| cm | centimeter | A size equal to 96px/2.54 = 37.8px |
| mm | millimeter | A size equal to 96px/25.4 = 3.8px |
| Q | quarter millimeter | A size equal to 96px/1016 = 0.94px |
Examples
/* shift the element 2rem to the right of its normal flow-of-text position */
position: relative;
left: 2rem;
/* position the element 2rem inside the browser's left edge */
position: fixed;
left: 2rem;
/* position the element 2rem inside its ancestor's left edge */
position: absolute;
left: 2rem;