zoukankan      html  css  js  c++  java
  • position的属性你真的全知道吗

    CSS中position属性(sticky)

    我不是最后一个知道的:position: sticky

    position的含义是指定位类型,取值类型可以有:staticrelativeabsolutefixedinheritsticky,这里sticky是CSS3新发布的一个属性。

    关于这里只讲述sticky的用法,关于sticky:

    • 设置了position: sticky的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
    • 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动(相当于此时fixed定位)。
    • 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量。

    在web开发中注意兼容性:

    sticky目前仍是一个试验性的属性,并不是W3C推荐的标准。它之所以会出现,也是因为监听scroll事件来实现粘性布局使浏览器进入慢滚动的模式,这与浏览器想要通过硬件加速来提升滚动的体验是相悖的。具体情况可以看下图,基本上可以说这个属性使用的浏览器只有FireFoxiOSSafari

    图片描述

    小程序自定义导航栏中使用sticky:

    sticky是可以再小程序端生效的!
    亲测这个属性在自定义导航时特别适用,我也是在纠结自定义导航的fixed适配占位问题时才了解到这个属性。

  • 相关阅读:
    算法训练 P1103
    算法训练 表达式计算
    算法训练 表达式计算
    基础练习 时间转换
    基础练习 字符串对比
    Codeforces 527D Clique Problem
    Codeforces 527C Glass Carving
    Codeforces 527B Error Correct System
    Codeforces 527A Glass Carving
    Topcoder SRM 655 DIV1 250 CountryGroupHard
  • 原文地址:https://www.cnblogs.com/wsj1/p/12710485.html
Copyright © 2011-2022 走看看