📅 最后修改于: 2023-12-03 14:41:48.700000 🧑 作者: Mango
当浏览器渲染 HTML 元素时，会根据元素的 CSS 样式来确定它在页面上的位置，其中 left 属性定义元素相对于其父元素左侧边缘的位置。
Object.style.left = "auto|length|%|initial|inherit"
auto：浏览器定义的默认值，元素的左侧边缘与其父元素的左边缘对齐。length：定义元素相对于其父元素左侧边缘的位置，可使用像素（px）、百分比（%）等单位。%：定义元素相对于其父元素左侧边缘的位置，以父元素的宽度为基础，使用百分比（%）作为单位。initial：将该属性设置为默认值。inherit：从父元素继承该属性值。<!DOCTYPE html>
<html>
<head>
<title>left 属性示例</title>
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background-color: #f0f0f0;
}
.child {
position: absolute;
width: 50px;
height: 50px;
background-color: #ff0000;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
此示例中，我们创建了一个相对定位的父元素 .parent，内部嵌套一个绝对定位的子元素 .child，并分别设置它们的宽高和背景色。然后，为 .child 元素设置了 left: 50px，也就是让它相对于其父元素左侧边缘向右移动了 50 像素，最终在 .parent 元素内部的位置是 (50px, 50px)。
left 属性只对定位元素有效（position: absolute|fixed）。left 属性设置为 auto，那么元素将采用浏览器默认样式之一（比如有些元素的默认样式可能为 left: 0）。left 属性的值为负数，元素将相对于其父元素左侧边缘向左移。left 属性的值大于父元素的宽度，元素将溢出父元素以外（除非父元素设置了溢出隐藏）。left 和 right 属性可以同时设置，例如 left: 20px; right: 10px;，这样元素将相对于父元素的左侧和右侧边缘对齐。left 和 margin-left 属性有所不同，前者只影响元素在布局流中的位置，而后者会在元素周围创建空白区域。element.style.left 属性获取或设置元素的 left 值，也可以使用 window.getComputedStyle(element).getPropertyValue("left") 获取计算后的 left 值。