CSS-固定定位、粘性定位

8次阅读
没有评论

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

固定定位 fixed

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

选择器 {
    position:  fixed; 
}

特点:

  1. 以浏览器的可视窗口为参照点移动元素
  • 跟父元素没有任何关系
  • 不随滚动条而滚动
  1. 固定定位不再占有原先的位置
  • 固定定位也是脱标的

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

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

粘性定位 sticky

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

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

特点:

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

定位总结

CSS-固定定位、粘性定位

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

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

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计433字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码