一.position定位常见属性
对于属性position来说，属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详述说明
看栗子
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>绝对定位position:absolute</title>
<style>
p {
background-color: #e8e8e8;
font-size: 14px;
}
</style>
</head>
<body>
<p>精通CSS高级web标准解决方案(第二版)</p>
<p style="position: absolute; background-color: #FFC107;">JavaScript基础高级教程</p>
<p>如何有效阅读一本书</p>
</body>
</html>
以上属性列表中最复杂的是position:absolute绝对定位，有如下几大特性
1.包裹性 对于inline/block元素，设置position后，都向inline-block化靠拢
2.破坏性 脱离文档结构，它会产生破坏性会导致父元素高度的塌陷，会影响其他元素重排.
3.跟随性 虽然absolute脱离文档结构，但它在不设置top/left值的情况下，还是老老实实的待在原来的位置
4.脱离文档流 脱离文档结构，不在标准的文档结构中
5.悬浮上方 absolute元素会悬浮在页面上方，会遮挡住下方的页面内容
6.突破overflow限制 overflow:hidden会裁剪超出内容区域，但absolute元素会悬浮在页面上方，突破overflow限制
absolute定位比较复杂。如果为absolute设置了top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：
文章出处 王福朋《css知多少》总结