2020-11-11

css定位属性

1. 相对定位
属性名称：relative
写法：position:relative
横向坐标用left,right 纵向坐标top,bottom
相对于自身原来的位置定位，进行位置的调整。
margin与相对定位调整位置的区别：
a.盒子和盒子的距离，间隙。相对定位：位置的调整。
b.margin会影响后面的元素。相对定位不会影响别的元素。
不脱离标准文档流，别的元素挤不走。
做绝对定位的参考，子绝父相。

2. 绝对定位
属性名称：absolute
写法：position:absolute
横向坐标用left,right 纵向坐标top,bottom
找一个参考系，定义横纵坐标。默认在父容器或者浏览器的左上角或者右下角。
绝对定位会脱离标准文档流。
以盒子为参考点：
一个绝对定位的元素，如果祖先元素中出现了已定位的元素，那么将以该元素为参考点。
1.以最近的已经定位的祖先元素，不一定是父容器，也可以是爷爷。
2.不一定是相对对位，任何定位信息，都可以做子容器的参考点。
3.使用最多的子绝父相。
4.以父容器的border内侧点为参考点，进行定位。
应用：
a.压盖效果，一个div压在另一个div上面；
b.绝对定位的盒子居中。 left：50%；margin-left:-自身宽带的一半；

3. 固定定位
属性名称：fixed
**写法：**position:fixed
横向坐标用left,right 纵向坐标top,bottom
相对于浏览器进行定位，无论页面怎么滚动，这个盒子显示的位置不变。
用途：
a.网页返回顶部，侧面广告；
b.顶部固定导航条