CSS 粘性布局:position:sticky 不起作用问题

设置position:sticky的元素会去找第一个父级元素,根据第一个父级元素是否滚动决定触不触发粘性效果。
而滚动相关的属性有:

overflow:visible;  (defalut)
overflow:hidden;
overflow:scroll;
overflow:auto

visible是默认的,不滚动
后三个是让元素内部滚动。
意思是最外层div设置了overflow的后三个属性的话,内部的所有属性都不会去依据内部元素滚动。而是最外层div发生滚动。所以内部某个元素设置了粘性布局后,其外部第一个元素不是最外层div的话,粘性布局就失效了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: CSS粘性定位(position:sticky)是一种新的定位方式,它可以在不同滚动位置下保留元素位置,使得页面更加直观。但是这种方式还存在一些采坑需要注意。 首先是浏览器兼容性问题。目前,不支持CSS粘性定位的浏览器非常常见,如IE、Edge,这使得使用CSS粘性定位时需要考虑到网站使用的浏览器类型和版本。 其次是定位方式问题CSS粘性定位的原理是在元素滚动到指定位置时切换元素的position属性,如果在滚动到指定位置之前改变元素位置,则会影响其粘性定位效果。因此,在使用CSS粘性定位时需要特别注意元素位置是否会发生改变。 最后是滚动容器问题CSS粘性定位是基于滚动容器进行计算的,因此滚动容器的设置会影响粘性定位效果。例如,如果没有设置滚动容器,粘性定位的元素将无法执行其粘性效果。另外,在滚动容器中,如果存在其他元素会影响CSS粘性定位元素的位置,也会影响粘性定位效果。 总结来说,CSS粘性定位虽然具有很多优点,但其实现也需要我们仔细考虑各种问题。在使用CSS粘性定位时,需要考虑到浏览器兼容性、定位方式和滚动容器设置,这样才能真正实现理想中的效果。 ### 回答2: CSS粘性定位position:sticky对于前端开发者来说已经是一种必备的技能。它可以让元素在滚动时保持位置的稳定性,同时也能始终保持相对应的位置。但是,尽管这个特性看似简单,却有着许多的问题和坑点需要注意。 第一个坑:浏览器兼容性问题。 尽管CSS粘性定位position:sticky已成为CSS三大定位属性之一,但实际上在早期的所有浏览器版本中它并不存在。因此,需要考虑浏览器的兼容性问题。在IE11和最新版Chrome、Firefox、Edge等浏览器中已支持。 第二个坑: z-index问题。 当元素使用position:sticky定位时,有时候会出现 z-index 失效的问题。可以通过设置该元素 position 属性为 relative 或者设置 z-index 属性来解决这个问题。 第三个坑:父级元素的高度问题CSS粘性定位position:sticky必须要有一个与父元素等高度的容器,否则它的粘性定位就不会生效。 第四个坑:滚动元素的高度限制问题。 如果滚动元素的高度不够,因此没有滚动条,那么粘性元素就会跟随滚动元素消失,而不是一直保持在相应的位置。 第五个坑:移动设备兼容性问题。 在移动设备上,由于touch事件的特性,很难达到粘性定位的效果, 因此需要进行移动端的优化。 总之, CSS粘性定位position:sticky对于提高用户体验来说是相当不错的,但是它在使用中需要注重以下几个方面的问题:浏览器兼容性, z-index问题,父级元素的高度问题,滚动元素的高度限制问题,移动设备兼容性问题,只有注重这些问题,我们才能避免采坑的风险。 ### 回答3: CSS 粘性定位 position:sticky 是在滚动时保持元素位置不变直到到达特定位置才滑动的 CSS 属性。相比于 fixed 和 absolute 定位,它的一个重要优点是具有相对定位的特性,可以在父元素内使用。 然而,在使用 CSS 粘性定位时,会遇到一些采坑的问题。 1. 浏览器兼容性问题 CSS 粘性定位 position:sticky 并不是所有浏览器都支持。在国内主流浏览器中,Chrome 和 Firefox 都已经支持,但是 IE 和 Safari 中并不可用。由于兼容性问题,需要考虑向下兼容,使用传统的 JavaScript 实现滚动粘性定位。 2. 内容多少不一致,表现难以统一 如果父元素的高度不固定,而导致子元素的高度也不确定时,粘性定位会出现问题。如果子元素超过了父元素的高度,那么粘性定位就会失效。因此,在使用 CSS 粘性定位时,需要确保父元素的高度和子元素的高度保持一致,以保持表现的一致性。 3. 滚动条过长,性能开销大 当页面滚动距离过长,粘性定位会占用大量的 CPU 资源。如果页面中存在大量粘性定位的元素,那么会对页面的性能造成很大的影响。因此,在使用 CSS 粘性定位时,需要考虑到页面性能的因素,尽量减少使用量。 总之,在使用 CSS 粘性定位时需要认真考虑兼容性、表现一致性和性能因素。建议在使用时灵活选择,并且在必要时使用 JavaScript 实现滚动粘性定位。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

webhyx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值