左边距 | left

左

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

/* <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设置为absolute或fixed时，left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。

当position设置为relative时，left属性指定了元素的左边界离开其正常位置的偏移。

当position设置为sticky时，如果元素在viewport里面，left属性的效果和position为relative等同；如果元素在viewport外面，left属性的效果和position为fixed等同。

当position设置为static时，left属性无效。

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

Initial value	auto
Applies to	positioned elements
Inherited	no
Percentages	refer to the width of the containing block
Media	visual
Computed value	if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation type	a length, percentage or calc(
Canonical order	the unique non-ambiguous order defined by the formal grammar

语法

值

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

对于绝对定位的元素，元素左外边距边界与其包含块左边界之间的偏移。

对于相对定位定位的元素，元素的左边界离开其正常位置的偏移。

<percentage>代表元素包含块的高度的百分比 <percentage>。auto这个关键字表示:

对于绝对定位元素，元素将忽略此属性已 right 属性为准，如果此时设置 width: auto ，将基于内容需要的宽度设置宽度。

对于相对定位元素，元素相对正常位置的偏移量将基于 right 属性，如果 right 也为 auto的话，元素将不会有偏移。

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

常用语法

<length> | <percentage> | auto

示例

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

<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	Status	Comment
CSS TransitionsThe definition of 'left' in that specification.	Working Draft	Defines left as animatable.
CSS Level 2 (Revision 1)The definition of 'left' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	5.5	5.0	1.0

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	(Yes)	1.0 (1)	6.0	6.0	1.0

另见

position，right，top，bottom