左侧

**left** CSS 属性参与指定 定位元素 的水平位置。此 内边距属性 对非定位元素没有影响。

试试看

语法

css
/* <length> values */
left: 3px;
left: 2.4em;
left: calc(anchor(right) + 20px);
left: anchor(--myAnchor 50%);

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

/* Keyword value */
left: auto;

/* Global values */
left: inherit;
left: initial;
left: revert;
left: revert-layer;
left: unset;

值

<length>

一个负数、空值或正数 <length>，表示

  • 对于绝对定位元素，到包含块的左边缘的距离。
  • 对于 锚点定位元素，anchor() 函数解析为一个相对于关联的锚点元素的左边缘或右边缘位置的 <length> 值。
  • 对于相对定位元素，元素相对于其正常位置向右移动的距离。
<percentage>

包含块宽度的一个 <percentage>。

auto

指定

  • 对于绝对定位元素，元素的位置基于 right 属性，而 width: auto 被视为基于内容的宽度；或者如果 right 也是 auto，则元素将定位在其作为静态元素应该水平定位的位置。
  • 对于相对定位元素，元素与其正常位置的距离基于 right 属性；或者如果 right 也是 auto，则元素根本不会水平移动。
inherit

指定该值与其父元素（可能不是其包含块）的计算值相同。然后，此计算值将被处理，就好像它是 <length>、<percentage> 或 auto 关键字一样。

描述

left 的效果取决于元素的定位方式（即 position 属性的值）。

  • 当 position 设置为 absolute 或 fixed 时，left 属性指定元素的左边缘外边距与包含块的左边缘内边距之间的距离。（包含块是元素相对于其定位的祖先元素。）如果定位元素具有关联的 锚点元素，并且属性值包含 anchor() 函数，则 left 相对于指定 <anchor-side> 边缘的位置定位定位元素的左边缘。left 属性与 left、right、start、end、self-start、self-end、center 和 <percentage> 值兼容。
  • 当 position 设置为 relative 时，left 属性指定元素的左边缘相对于其正常位置向右移动的距离。
  • 当 position 设置为 sticky 时，left 属性用于计算粘性约束矩形。
  • 当 position 设置为 static 时，left 属性没有效果。

当 left 和 right 都定义时，并且宽度约束没有阻止它，则元素将拉伸以满足两者。如果元素无法拉伸以满足两者，则元素的位置将过度指定。在这种情况下，当容器为从左到右时，left 值优先；当容器为从右到左时，right 值优先。

正式定义

初始值auto
适用于定位元素
继承否
百分比指的是包含块的宽度
计算值如果指定为长度，则为相应的绝对长度；如果指定为百分比，则为指定的值；否则为auto
动画类型一个长度，百分比或calc()；

正式语法

left = 
  auto                 |
  <length-percentage>  

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

示例

定位元素

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 id="example_5">
      <pre>
        position: absolute;
        right: 0;
        left: 0;
        top: 200px;
      </pre>
      <p>Absolute position with both left and right declared</p>
    </div>
  </div>
</div>

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;
}
#example_5 {
  position: absolute;
  right: 0;
  left: 0;
  top: 100px;
  background-color: #d7ffc2;
}

结果

规范

规范
CSS 定位布局模块级别 3
# 内边距

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅