在Web前端中，元素的定位是必须掌握的，然后也是比较容易搞混淆的：
positon包含以下值：
1.absolute 绝对定位：相对位置为最近一级的非static定位的父元素；
2.relative 相对定位：相对正常位置进行布局；
3.fixed 固定定位：相对于浏览器窗口进行定位；
4.static 没有定位：元素出现在正常的流中，
absolute绝对定位：采用绝对定位，会脱离文档流，浮动起来，多个层重叠使用z-index属性改变重叠的顺序，该定位在时候时，其相对位置为相对定位容器的左上角的内边框，忽略padding;不管是行内元素还是块级元素，使用绝对定位后，其display属性为block,且宽度auto。
fixed固定定位：采用固定定位，也会脱离文档流，但老的IE6并不支持该定位， 相对于浏览器窗口进行定位，并且元素在屏幕滚动事不会改变位置，常用于网站的头部导航栏等方面；但给父元素加上transform:translate(0,0)属性，fixed可根据父容器定位。
absoluted与relative的结合使用：
<body style='margin:10px;width:300px;color:white;background-color:#BDD7EE;'>
<div style='background-color:#F8CBAD;padding-top:10px;'>祖先元素
<div style='background-color:#FFE699;border:10px solid white;padding-top:10px;'>父级元素
<div style='background-color:#C5E0B4;'>子元素</div>
</div>
</div>
</body>
情况1：祖先元素采用相对定位，子元素绝对定positon:absolute;
分析：祖先元素相对定位，默认在body的content-box区域内进行定位、占位
子元素绝对定位，找到对应的祖先元素，脱离文档流在祖先节点的padding-box区定位，不占位，宽度auto;
情况2：父级元素采用相对定位，子元素绝对定positon:absolute;
分析：父级元素相对定位，默认在祖先元素的content-box区域内进行定位、占位
子元素绝对定位，找到对应的父级元素，脱离文档流在父级节点的padding-box区定位，不占位，宽度auto;
情况3：祖先元素、父级元素采用相对定位，子元素绝对定positon:absolute;
分析：祖先元素相对定位，默认在body的content-box区域内进行定位、占位
父级元素相对定位，默认在祖先节点的content-box区域内进行定位、占位
子元素绝对定位，找到对应的父级元素，脱离文档流在父级节点的padding-box区定位，不占位，宽度auto;
情况4：父级元素采用绝对定位，子元素绝对定positon:absolute;
分析：父级元素绝对定位，默认在祖先元素的content-box区域内浮动，宽度为auto
子元素绝对定位，找到对应的父级元素，脱离文档流在父级节点的padding-box区定位，不占位，宽度auto;
总结：元素的定位是一个比较容易混淆的点，不管是行级元素还是块级元素，应用了绝对定位后，display为block,可以设置宽度和高度，没有设置的话，默认auto