2021-03-23 02:46:39
CSS关于position定位的几种方式。
1 定位的分类
static:定位默认值
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位
sticky:开启元素的粘滞定位
2 具体实现方式
相对定位通过position: relative开启元素的相对定位相对定位的相对位置参照于元素在文档流中的位置，也就是它自己，而且相对定位会提升元素的文档流，且元素不会脱离文档而造成塌陷。开启元素相对定位之后，如果不设置偏移量，元素位置不会发生任何变化，可通过设置元素的偏移量对元素位置进行调整。
top: 定位元素和定位位置上边的距离;
bottom：定位元素和定位位置下边的距离
left：定位元素和定位位置左边的距离
right：定位元素和定位位置右边的距离
特点：1、开启相对定位之后不设置偏移量元素不会发生任何变化； 2、相对定位参照元素在文档流中的位置进行定位； 3、相对定位会提升元素的层级； 4、相对定位不会脱离文档流且不会改变元素性质；
绝对定位通过position:absolute开启元素绝对定位特点： 1、开启绝对定位之后不设置偏移量，则位置不会发生变化； 2、绝对定位后，元素会脱离文档流； 3、绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开； 4、绝对定位会提升元素层级； 5、绝对定位是相对于其保护块进行定位；
固定定位通过position:fixed开启元素绝对定位特点与绝对定位基本一致
参照位置永远参考浏览器的视口进行定位，即（0,0）坐标，例如网页小广告
粘滞定位通过position:sticky开启粘滞定位
position:sticky; // 开启粘滞定位top:0; // 开启粘滞定位元素到该位置时固定特点与相对定位基本一致
参照位置参考包含块
以上即为CSS定位的几种方式。
下一篇：没有了
