css返回顶部按钮设置成相对定位还是绝对定位呢?

如题,面试的时候。我回答是相对定位,但是网上好像说设置成绝对定位,脱离文档流。请问是可选的吗?还是基本都是绝对定位呢?

阅读 12.7k
5 个回答
定位元素(positioned element)是其计算后位置属性为 relativeabsolutefixed 或 sticky 的一个元素(换句话说,除static以外的任何东西)。
相对定位元素(relatively positioned element计算后位置属性为 relative 的元素。
绝对定位元素(absolutely positioned element)计算后位置属性为 absolutefixed 的元素。
粘性定位元素stickily positioned element计算后位置属性为 sticky 的元素。

绝对定位,因为当你页面往下滚动的时候,这个按钮需要一直定在页面的固定位置不动,所以需要一个fixed来做一个固定的效果,可以参考 https://element.eleme.cn/#/zh-CN/component/backtop,用相对定位做不到这个效果。

基本都是固定定位,通过判断滚动高度判断是否显示。

固定定位 fixed

原则上是要设为 fixed ,相对于窗口定位,始终固定在一个地方。
实现上,PC端没有问题。但是在移动端 fixed 的表现不一致,问题在 Safari 上尤其突出,一搜一大堆吐槽和解决方案,几乎所有的解决方案都指向一个答案——absolute
当然,作为“回到顶部”按钮,面试的时候顺便说一下最好仅在滚动发生后才显示,回到顶部后自动隐藏,算是一个加分项。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题