Position：absolute

前端七班-鲁晓松

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

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

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

1.脱离文档流，其在文档流中所占空间会被关闭。

2.可相对与已被定位的父元素进行定位，逐级向上直到找到为止。

3.生成一个块级框，不论原来它在正常流中生成何种类型的框。（其实就是形成bfc）。

4.拥有z-index属性，可以进行层级设定，最大为2147483647。（等值按网页代码中层出现的顺序,后出现的层高于先出现的层）

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;

2.父元素fixed（√）

.parents{width:200px;height:200px;position:fixed;background: #f60;letf:100px;top:100px;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;

3.父元素absolute（√）

.parents{width:200px;height:200px;position:absolute;background: #f60;letf:100px;top:100px;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;

结论：relative、fixed、absolute表现效果一致，父容器只要定位position就有效。

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