left

摘要

left 属性指定当前元素在有定位的包含块元素中的位置。

对于绝对定位元素（即position: absolute or position: fixed)的元素，它指定了元素左边界与其包含块左边界之间的距离。

语法

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

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

/* Keyword values */
left: auto;

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

属性值

<length>

取值可为负数，null，正数:

• 对于绝对定位元素, 其值为到包含块元素左边界的距离
• 对于相对定位元素, 如果其未被定位，其值为该元素相对正常文档流中的偏移量

<percentage>

即用包含块宽度的百分比<percentage>来描述其值 

auto

关键字:

• 对于绝对定位元素，元素的定位基于right属性和指定的宽度，auto 宽度值则基于容器大小来计算，
• 对于相对定位元素, 其相对于原始位置的左偏移量是基于right属性来计算的，如果right也为auto值，则其偏移量为0；

常用语法

<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>

案例

规范

浏览器兼容性

更多

• position, right, bottom, left