HTML5技术

使用 position:sticky 实现粘性布局 - ChokCoco(2)

字号+ 作者:H5之家 来源:H5之家 2017-02-16 14:01 我要评论( )

设定为position:sticky元素的任意父节点的 overflow 属性必须是 visible,否则position:sticky不会生效。这里需要解释一下: 如果position:sticky元素的任意父节点定位设置为position:overflow,则父容器无法进行滚

设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible,否则 position:sticky 不会生效。这里需要解释一下:

  • 如果 position:sticky 元素的任意父节点定位设置为 position:overflow,则父容器无法进行滚动,所以 position:sticky 元素也不会有滚动然后固定的情况。
  • 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed,则元素相对父元素进行定位,而不会相对 viewprot 定位。
  • 达到设定的阀值。这个还算好理解,也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

  •   开始使用?

    上面从兼容性也看到了,情况不容乐观,但是用于某些布局还是能省很多力的,如果真的希望用上这个属性,可以采用一些开源库来实现兼容。

    推荐 fixed-sticky 。

     

    系列 CSS 文章汇总在我的 Github 。

    到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • CSS gradient渐变之webkit核心浏览器下的使用以及实例 - 孟然

      CSS gradient渐变之webkit核心浏览器下的使用以及实例 - 孟然

      2017-02-04 15:00

    • 棒!使用.NET Core构建3D游戏引擎 - Savorboard

      棒!使用.NET Core构建3D游戏引擎 - Savorboard

      2017-01-29 08:03

    • SQL Server 2014内存优化表的使用场景 - 桦仔

      SQL Server 2014内存优化表的使用场景 - 桦仔

      2017-01-25 14:02

    • 不常见但很有用的chrome调试工具使用方法 - 小火柴的蓝色理想

      不常见但很有用的chrome调试工具使用方法 - 小火柴的蓝色理想

      2017-01-24 14:00

    网友点评
    i