CSS left property

此 CSS 属性指定了水平定位元素的左偏移量，并且不影响非定位元素。它是四种偏移属性之一，其余的为 **right（右）、top（上）** 和 **bottom（下）**。

当同时定义了 **left** 和 **right** 属性时，如果容器是自右向左（right-to-left）的，则 right 值具有优先权；如果容器是自左向右（left-to-right）的，则 left 值具有优先权。

此属性的效果取决于相应元素的定位方式，即 **position** 属性的值。当 **position** 属性的值设置为 **static（静态）** 时，**left** 属性无效。

此属性对 **static（静态）** 值以外的定位元素的效果如下：

• 当元素被设置为绝对定位或固定定位时（即 **position: absolute;** 和 **position: fixed;**），left 属性指定元素左边缘与包含块（元素相对定位的祖先元素）左边缘之间的距离。
• 如果元素是相对定位（即 **position: relative;**），left 属性会将元素的左边缘相对于其正常位置向左/右移动。
• 如果 **position** 设置为 **sticky（粘性）**，即 **position: sticky;**，则定位上下文是视口（viewport）。当元素在视口内时，left 属性的行为类似于其 position 是 relative。当元素在视口外时，left 属性的行为类似于其 position 是 fixed。

语法

属性值

此属性的值定义如下：

auto（自动）：这是默认值。它允许浏览器计算左边缘的位置。

length（长度）：此值以 px、cm、pt 等单位定义 left 属性的位置。它允许负值。

percentage（百分比）：此值以百分比（%）定义 left 属性的位置。它相对于元素包含块的宽度计算。它也允许负值。

**初始：**它将属性设置为其默认值。

inherit： 它继承父元素的属性。

示例

在此示例中，有四个绝对定位（即 **position: absolute;**）的 div 元素。我们正在为它们应用 **left** 属性。具有 **left: initial;** 和 **left: auto;** 的 div 元素由于具有相似的尺寸和默认值而会重叠。

在输出中，我们可以看到带有黄色边框的 div 元素使用的是 **left: auto;**，而带有浅蓝色边框的 div 元素使用的是 **left: initial;**。

输出

示例

在此示例中，有四个相对定位（即 **position: relative;**）的 div 元素。我们正在为它们应用 **left** 属性。

输出