left 属性:获取或设置具有定位属性(position: absolute)的子元素 相对于 具有定位属性(position:relative)的父对象的左边距【子绝父相原则】,如果具有定位属性(position: absolute)找不到具有定位属性(position:relative)的父对象,则将相对于body定位。
【补充:绝对定位与相对定位说明】
绝对定位(position: absolute)的元素是相对于距离他最近的开启了定位的祖先元素进行定位,如果所有的祖先元素都没开启定位,则相对于浏览器窗口进行定位。
相对定位(position:relative)的元素相对于其自身在文档流中的位置来定位。
结合示例说明如下:
<body>
<div id="parent">
<div id="son">
内层盒子
</div>
</div>
</body>
样式如下
<style>
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
#parent {
width: 400px;
height: 400px;
background: red;
margin: 100px 100px;
/*overflow: hidden;*/
position: relative;
/*相对于自身定位,设置left属性后元素的左边距为100-50=50px*/
left: -50px;
}
#son {
width: 200px;
height: 200px;
background: orange;
position: absolute;
left: 50px;
}
</style>
offsetLeft 属性:获取相对于父对象的左边距。
如果父div的position定义为relative,子div的position定义为absolute(子绝父相) ,那么子div的style.left的值是相对于父div的值
left 属性、offsetLeft 属性区别在于:
1. style.left 返回的是字符串,如10px,offsetLeft返回的是数值10。
2. style.left可读可写,offsetLeft只读,因此如果想要改变div的位置,只能通过修改元素的style.left实现。
3. style.left的值需要在html标签中进行定义【<div id="son" style="left:100px"> 内层盒子</div>】,才可以通过【son.style.left】获取到值。如果定义在css样式里,通过【son.style.left】获取到值为空。