zoukankan      html  css  js  c++  java
  • css之position

        在我之前的认知中,position值有static(默认)、relative(相对)、absolute(绝对)、fixed(固定不变)
        这四个值大家了解css的都是知道的我就不多说,这里要说的是sticky(粘性),sticky是17年浏览器才开始支持的,它会产生动态效果,很像relativefixed的结合:一些时候是relative定位(定位基点是自身默认位置),另一些时候自动变成fixed定位(定位基点是视口)。

      sticky生效的前提是,必须搭配topbottomleftright这四个属性一起使用,不能省略,否则等同于relative定位,不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离",浏览器把它当作sticky的生效门槛。

         它的具体规则是,当页面滚动,父元素开始脱离视口时(即部分不可见),只要与sticky元素的距离达到生效门槛,relative定位自动切换为fixed定位;等到父元素完全脱离视口时(即完全不可见),fixed定位自动切换回relative定位。

         要实现效果只需要简单css {position:sticky;top:0;}

    参考链接 http://www.ruanyifeng.com/blog/2019/11/css-position.html

  • 相关阅读:
    Java多线程同步和异步问题
    最优二叉查找树
    岛屿的周长
    Mac 环境下 go 国内代理配置
    岛屿数量
    字符串解码
    环形链表 II
    颜色分类
    无重复字符的最长子串
    完全平方数
  • 原文地址:https://www.cnblogs.com/wangxiaoer5200/p/11898707.html
Copyright © 2011-2022 走看看