美文网首页
粘性定位

粘性定位

作者: leeolady | 来源:发表于2019-03-15 15:41 被阅读0次

粘性定位 position:sticky 一个定位的奇葩,

设置position:sticky同时给一个(top,bottom,right,left)之一即可

使用条件:
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效

解决办法:
1.在使用组件库的tab时,外层套一个div,防止点击穿透和不正常的事件流走向
或者(一个治标不治本的方法,具体看业务场景)

2.组件库的样式无法改,sticky作为tab组件的行内样式,因为我使用这个tab时是直接在viewpoint的顶部的,这是完全可以用fixed达到效果。我在调用类的外部设置了position:fixed !import;样式最高优先级去覆盖了组件库中的定位样式,就正常了。

兼容:
position:sticky对安卓的兼容并不是太友好,尤其是对安卓系统的兼容,目前手机端的用户非常多,要做到兼顾,由于安卓系统对sticky粘性定位的惨淡支持;如果业务场景可以用其它定位解决,那就还是不要用sticky

相关文章

  • sticky吸顶

    position: sticky(粘性定位) 粘性定位 sticky 相当于相对定位 relative 和固定定位...

  • position:sticky

    粘性定位 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。 当窗口滚动到元素 ...

  • 粘性定位

    粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。 在 viewport 视口滚...

  • 粘性定位

    粘性定位 position:sticky 一个定位的奇葩, 设置position:sticky同时给一个(t...

  • 2020-12-31-CSS定位

    默认定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性...

  • 粘性定位 sticky

    该元素在父元素中必须能滚动,父元素 overflow 属性为 auto、scroll,且子元素高度超过父元素高度;...

  • 深入理解position sticky 粘性定位

    粘性定位可以简单理解为relative和fixed布局的混合。 基本概念 流盒指的是粘性定位元素最近的可滚动元素(...

  • 彻底理解粘性定位 - position: sticky

    粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的...

  • position:sticky粘性布局

    position:sticky粘性布局 作用 它是相对定位position:relative和固定定位positi...

  • position:sticky粘性定位

    最近项目中遇到一个需要置顶导航栏的问题,一顿操作用js写好了之后偶然间发现css居然新增了一条属性可以实现同样的效...

网友评论

      本文标题:粘性定位

      本文链接:https://www.haomeiwen.com/subject/taqzpqtx.html