left

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

CSS **left**属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移,非定位元素设置此属性无效。

css
/* <length> values */
left: 3px;
left: 2.4em;

/* <percentage>s of the width of the containing block */
left: 10%;

/* Keyword value */
left: auto;

/* Global values */
left: inherit;
left: initial;
left: unset;

left的效果取决于元素的position属性:

  • position设置为absolutefixed时,left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
  • position设置为relative时,left属性指定了元素的左边界离开其正常位置的偏移。
  • position设置为sticky时,如果元素在 viewport 里面,left属性的效果和 position 为relative等同;如果元素在 viewport 外面,left属性的效果和 position 为fixed等同。
  • position设置为static时,left属性无效。

leftright 同时指定时,元素的位置会被重复指定。当容器是从左到右时,left的值会被优先设定;当容器是从右到左时,right的值会被优先设定。

初始值auto
适用元素positioned elements
是否是继承属性
Percentagesrefer to the width of the containing block
计算值if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
动画类型a length, percentage or calc();

语法

<length>

可以是负的,正的 或者 null <length> 表示:

  • 对于绝对定位的元素,元素左外边距边界与其包含块左边界之间的偏移。
  • 对于相对定位定位的元素,元素的左边界离开其正常位置的偏移。
<percentage>

代表元素包含块的宽度的百分比 <percentage>

auto

这个关键字表示:

  • 对于绝对定位元素,元素将忽略此属性而以right属性为准,如果此时设置width: auto,将基于内容需要的宽度设置宽度;如果right也为auto的话,元素的水平位置就是它假如作为静态 (即 static) 元素时该在的位置。
  • 对于相对定位元素,元素相对正常位置的偏移量将基于right属性;如果right也为auto的话,元素将不会有偏移。
inherit

这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为 <length><percentage>auto 一样。

常用语法

left = 
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>

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

<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<dashed-ident>

<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

示例

CSS

css
#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5c5c5c;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  white-space: pre-line;
  word-wrap: break-word;
}

#example_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #d8f5ff;
}

#example_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #c1ffdb;
}
#example_3 {
  width: 600px;
  height: 400px;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #ffd7c2;
}

#example_4 {
  width: 200px;
  height: 200px;
  position: absolute;
  bottom: 10px;
  right: 20px;
  background-color: #ffc7e4;
}

HTML

html
<div id="wrap">
  <div id="example_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>
      The only containing element for this div is the main window, so it
      positions itself in relation to it.
    </p>
  </div>

  <div id="example_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>Relative position in relation to its siblings.</p>
  </div>

  <div id="example_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>Relative to its sibling div above, but removed from flow of content.</p>

    <div id="example_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>
  </div>
</div>

案例

规范

Specification
CSS Positioned Layout Module Level 3
# insets

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
left
anchor()
Experimental
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

参见