粘性定位position:sticky的使用

前提问题:弹窗中内容进行滚动时,设置下方按钮不允许滚动
解决过程:使用粘性布局,position:sticky,也称粘性定位。
1.粘性定位的元素依赖于用户的滚动,在相对定位(relative)与固定定位(fixed)之间进行切换,基于位偏移的值进行偏移。
2.该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
3.元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于屏幕范围(viewport)视口来计算元素的偏移量
4.当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。
解决结果:

.explame{
    position: sticky; 
    left:0;
    top: 20px;
}

设置了top:20px,当sticky元素到达距离相对定位的元素顶部20px的位置时固定,不再向上移动

.explame{
    position: sticky; 
    bottom:0px;
}

设置了bottom:0px,当sticky元素到达距离相对定位的元素底部0px的位置时固定,不再向下移动,可以理解为固定在底部,不参与滚动

### 回答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
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值