css中定位的用法

定位

定位（position）：用来检索或者设置元素的定位方式（改变元素位置的属性）
position的属性值有static、absolute、relative、fixed、sticky
注:使用了定位属性margin:auto会失效。

使用定位的步骤

1:给元素添加position属性
2:寻找参照物
3:添加坐标(四坐标:top、bottom、left、right)

静态定位(static)

position的默认值，默认文本流的状态。
不会识别left right top bottom指定的坐标
注:加了静态定位等于无作用，默认值不识别坐标。如下图

绝对定位(absolute)

1: 参照物：按照已经有定位的父元素进行位置的变化。
2: 假如 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。
3: 绝对定位，脱离文档流、不占据空间
注:此图父子元素都用了绝对定位,根据坐标进行了移动。

相对定位(relative)

1 : 参照物：自身默认的位置！
2 : 始终占据空间，不会破坏文档流
注:以下两图可做对比

固定定位(fixed)

1 : 参照物：浏览器窗口
2 : 脱离文本流，不占据空间
注：比较下面两图可知红色盒子固定位置了！

黏性定位(sticky)

1:position:relative 和 position:fixed的结合。
2:页面没超出窗口范围，按照relative 执行
3:内容超出窗口位置，按照fixed执行。
感兴趣的朋友可以尝试一下，谢谢大家的观看！！！

来源：CSDN

作者：DG_MD

链接：https://blog.csdn.net/DG_MD/article/details/104460504