CSS-固定定位、粘性定位

共计 433 个字符，预计需要花费 2 分钟才能阅读完成。

固定定位 fixed

固定定位是元素固定于浏览器可视的区域

选择器 {
    position:  fixed; 
}

特点：

1. 以浏览器的可视窗口为参照点移动元素

• 跟父元素没有任何关系
• 不随滚动条而滚动

1. 固定定位不再占有原先的位置

• 固定定位也是脱标的

固定定位小技巧：固定在版心右侧位置

1. 让固定定位的盒子 left: 50%; 走到浏览器可视区（也可以看做版心）的一般位置
2. 让固定定位的盒子 margin-left: ; 版心宽度的一半距离，多走版心宽度的一半位置就可以让固定定位的盒子贴着右侧对齐了

粘性定位 sticky

粘性定位可以认为是相对定位和固定定位的混合

选择器 {
    position: sticky; top: 10px; 
}

特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加 top、left、right、bottom 其中一个才有效
   跟页面滚动搭配使用，兼容性较差IE不支持

定位总结

一定记住相对定位、绝对定位、固定定位两个大特点：

• 是否占有位置（是否脱标）
• 以谁为基准点移动位置