left#

#Introduction

The left CSS property participates in specifying the horizontal position of a positioned element. For more information, please refer to property position.

The effect of left depends on how the element is positioned (i.e., the value of the position property):

• When position is set to absolute or fixed, the left property specifies the distance between the element's outer margin of left edge and the inner border of left edge of its containing block. (The containing block is the ancestor to which the element is relatively positioned.)

• When position is set to relative, the left property specifies the distance the element's left edge is moved to the right from its normal position.

When both left and right are defined, and width constraints don't prevent it, the element will stretch to satisfy both. If the element cannot stretch to satisfy both, the position of the element is overspecified. When this is the case, the left value has precedence when the container is left-to-right; the right value has precedence when the container is right-to-left.

#Examples

css-apisrc/left/App.tsx

Preview

#Syntax

/* <length> values */
left: 3px;
left: 2rpx;
left: 2.4em;
left: 3rem;

left: 10%;

/* Keyword value */
left: auto;

/* calc */
left: calc(1px + 1px);

#Values

#auto

Default value.

#<length>

A negative, null, or positive <length> that represents:

• for absolutely positioned elements, the distance to the left edge of the containing block.

• for relatively positioned elements, the distance that the element is moved to the right of its normal position.

#<percentage>

A <percentage> of the containing block's width.

#Formal definition

#Formal syntax

left =
  auto                 |
  <length-percentage>  |

<length-percentage> =
  <length>      |
  <percentage>

#Compatibility

LCD tables only load in the browser