CSS的定位相关(本文参考b站黑马pink老师的前端课程整理)

1.为什么需要CSS定位

（1）因为标准流和浮动无法实现定位的效果

（2）想要实现某盒子在它的父级盒子里自由移动/固定于屏幕中某位置

并且可以压住其他盒子

2.定位组成

定位模式+边偏移

3.定位模式

（1）【了解】静态定位

含义：默认定位方式=无定位

语法：选择器{

                      position:static;

}

特征：

a.按标准流特征摆放盒子

b.很少在布局中使用

（2）【重要】相对定位

含义：元素相对其原来的位置移动

语法：选择器{

                      position:relatives;

}

特征:

a.移动位置参考其之前的位置

b.相对定位不脱标，仍保留原来位置

（3）【重要】绝对定位

含义：元素相对其祖先元素移动

语法：选择器{

                      position:absolute;

}

特征：

a.如无祖先元素/祖先元素无定位，则以浏览器为准来定位

b.如祖先元素有定位（相对/绝对/固定定位），则以最近一级的有定位的祖先元素作为定位参考

c.绝对定位，不占有原来位置

（4）【重要】固定定位

含义：元素固定在浏览器可视区中的某位置

语法：选择器{

                      position:fixed;

}

特征：

a.以浏览器的可视窗口为移动参考点

(与父元素的情况无关)

(元素不随滚动条滚动)

b.固定定位不占之前的位置

（5）粘性定位

含义：元素固定在浏览器可视区中的某位置

语法：选择器{

                      position:sticky;

                      top/left/right/bottom:10px;

}

特征：

a.以浏览器的可视窗口为移动参考点(固定定位的特征)

b.粘性定位占原有位置(相对定位的特征)

c.必须添加top/left/right/bottom其中一个才有效

4.定位模式总结