主页

固定定位fixed

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

语法:
选择器 { position:  fixed; }

特点:

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

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

2.固定定位不在占有原先的位置

  • 固定定位也是脱标的

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

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

粘性定位sticky

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

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

特点:

  1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
  2. 粘性定位占有原先的位置(相对定位特点)
  3. 必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用,兼容性较差IE不支持

定位总结

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

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

CSS

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0
查看目录

目录

来自 《CSS-固定定位、粘性定位》
评论

博主很懒,啥都没有
46 文章数
7 评论量
3 分类数
49 页面数
已在风雨中度过 198天7小时20分