MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

摘要

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

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

初始值auto
适用元素positioned elements
是否是继承属性
Percentagesrefer to the width of the containing block
适用媒体visual
计算值if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
Animation typea length, percentage or calc();
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

案例

规范

说明 状态 备注
CSS Transitions
left
Working Draft 定义向左播放的动画效果
CSS Level 2 (Revision 1)
left
Recommendation 初始定义

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
基础支持 1.0 1.0 (1.7 or earlier) 5.5 5.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基础支持 1.0 1.0 (1) 6.0 6.0 1.0

更多

文档标签和贡献者

 此页面的贡献者: 1136863240, zhengxinxin
 最后编辑者: 1136863240,