1.2-6css定位属性

定位属性

我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果。

定位属性 position

属性名：
position。
属性值：
relative 相对定位
absolute 绝对定位
fixed 固定定位
作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移

偏移量属性
定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。
水平方向：left、right。
垂直方向：top、bottom。
属性值：常用 px 为单位的数值，或者百分比。

相对定位

属性值：relative，相对的意思。
参考元素：标签加载的原始位置。
必须搭配偏移量属性才能发生位置移动。

元素相对于自身原始位置向右向下分别移动100px:

position:relative;  
left: 100px;  
top: 100px;

相对定位的性质

性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。
元素显示效果上，原位留坑，形影分离。

注意事项
注意①：偏移量属性的值是区分正负的。
正数：表示偏移方向与属性名方向相反。
负数：表示偏移方向与属性名方向相同。
向左移动50px，向上移动100px：

position: relative;  
left: ‐50px;  
top: ‐100px;

注意②：同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性。
建议：书写时从水平方向和垂直方向各挑一个属性进行组合。
向上向左偏100和50px:
position: relative;
left: ‐50px;
top: ‐100px;
right: ‐50px;
bottom: ‐50px;

注意③：由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的 正值等价于 bottom 的负值。
为了方便记忆，可以选择只使用 left、top 组合。
position: relative;
right: ‐50px;
bottom: ‐50px;
等于
position: relative;
left: 50px;
top: 50px;

实际应用：

• 由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。