Question

Position：absolute

Answer 1

css position属性允许你定位一个元素，通过使用top，left，bottom，right属性，当然你必须先设定position的属性值，以便告诉浏览器依据什么方式进行定位。

因为绝对定位（position：absolute）在实际应用中有着十分重要的地位，特别进行深度探究以便在使用中能更得心应手。
元素设置position：absolute后主要会带来4个影响。

1、2、和4都好理解这里对2进行着重分析。
因为定位可以是realitive、absolute和fixed。故父级元素会出现3中情况。
1.父元素relative(√)。
.parents{width: 200px;height:200px;position: relative;background: #f60;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;

第二个问题top、right、bottom、left定位到最近一个具有定位设置父元素的边缘的距离。这个边缘指的是什么？
因为盒子的margin 、border、padding、及content都会影响盒子的尺寸。在这里对父元素为relative的模型进行依次添加。
1.添加margin:50px 0 0 50px;

2.添加border-left: 50px solid #000;border-top: 50px solid #000;

3添加padding:50px 0 0 50px;

第三个问题left除了设置length具体尺寸，%相对于父容器的尺寸，默认会设置成auto，通过浏览器来计算位置。那么具体是怎么计算的呢。父元素为relative的模型进行探究。
1.子元素top: auto;left: auto;

2.父元素添加margin-left:50px;

3.父元素继续添加border-left:50px solid #000;

4.父元素继续添加padding-left:50px;

5.父元素继续添加padding-top:50px;