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】获取到值为空。
