fixed无效的情况

fixed无效的情况,第1张

当某元素的position是fixed的时候,且其父元素的样式有以下情况的,fixed的定位会失效:

1、父元素的transform属性值不为none时

2、父元素的perspective值不为 none 的元素(没遇到过,摘抄一下)

3、在will-change中指定了任意 CSS 属性(没遇到过,摘抄一下)

场景1:在swiper里面有某个子元素是fixed定位,此时该定位会失效。原因是,swiper组件用的就是tansform进行卡片位置变换的,所以引起定位失效。

uniapp提供了 *** 作滚动条的方法uni.pageScrollTo,但是其并不好用

1.在APP端使用时不能使用selector

2.在小程序中使用时,selector不能使用纯数字作为id,最好使用英文小写字母

3.app端使用duration必须设置为0

4.app端使用时最好放在延时函数之中

5.在view中使用uni.pageScrollTo不能设置固定高度,否则会不起作用

6.在view中使用v-for需要注意页面加载顺序以及是否存在使用null数据进行页面渲染,一旦出错也会造成uni.pageScrollTo失效

1.scroll-view中不设置顶部会造成列表信息循环滚动,同时onPullDownRefresh方法失效

2.在iOS中会有fixed定位在底部失效的问题,此时需要把content的view设置为absolute,

footer的view设置为fixed。这样在滑动content的滚动条时就不会带着下部fixed定位的view一起滑动

Position属性

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed :生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative:生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

inherit:规定应该从父元素继承 position 属性的值。

只有在Position为static才会忽略z-index 声明,所以不会出现你说的情况,如果还有疑问请将代码贴出来看一下吧


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12006725.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存