持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情
absolute定位
-
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考
<body>；必须搭配偏移量属性才会发生位置移动 -
性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开
-
注意事项：
-
绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同
-
在绝对定位中，由于参考点不同，left正值不再等价于right的负值
-
<body>为参考元素的参考点：以<body>为参考元素时，参考点的确定与偏移量方向有关。第一，如果有top参与的定位，参考点就是<body>页面的左上顶点或右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角；第二，如果有bottom参与的绝对定位，参考点是<body>页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角 -
实际应用中，如果以
<body>为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用<body>作为参考元素 -
祖先级为参考元素：如果祖先级中有定位元素，就不会去参考
<body> -
参考元素：参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先
-
根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：子绝父相，子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多数使用子绝父相的情况
-
祖先元素参考点：如果绝对定位的参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的padding区域（left、top：参考点是祖先的border以内的左上顶点，对比点是盒子自身的左上角；right、top：参考点是祖先的border以内的右上顶点，对比点是盒子自身的右上角；left、bottom：参考点是祖先的border以内的左下顶点，对比点是盒子自身的左下角；right、bottom：参考点是祖先的border以内的右下顶点，对比点是盒子自身的右下角；）
-
-
