zoukankan      html  css  js  c++  java
  • fixed 与 sticky

    固定定位类似于绝对定位,所不同的是该元素的包含块是通过所建立的含初始块视口中,除非任何祖先具有transformperspectivefilter属性设置为比其他的东西none(参见CSS转换规格),然后使该祖先取代包含块的元素这可用于创建“浮动”元素,无论滚动如何,该元素都保持在相同位置。在下面的示例中,框“One”固定为距离页面顶部80像素,距离左侧10像素。即使在滚动之后,它仍然保持在相对于视口的相同位置。

    #one  { 
      position  fixed ; 
       80px ; 
       10px ; 
      背景蓝色; 
    }   fixed固定块不会随鼠标滑动而滑动

    粘性定位可以被认为是相对定位和固定定位的混合。粘性定位的元素被视为相对定位,直到它超过指定的阈值,此时它被视为固定的,直到它到达其父母的边界。例如...

    #one  {  position  sticky ;   10px ;  }

    ...将定位与ID的元素一个相对直到视口被滚动,使得该元件将是从顶部小于10个像素。超过该阈值,元素将固定为从顶部10像素。

    粘性定位的常见用途是用于按字母顺序排列的列表中的标题。“B”标题将出现在以“A”开头的项目下方,直到它们在屏幕外滚动。然后,“B”标题将保持固定在视口的顶部,直到所有“B”项目都在屏幕外滚动,此时它将被“C”覆盖,而不是使用其余内容滑动屏幕。标题,等等。

    你必须有至少一个指定的阈值toprightbottom,或left为粘稠定位像预期的那样。否则,它将与相对定位无法区分。

    dt  { 
      background #B8C1C8 ; 
      border-bottom  1px solid#989EA4 ; 
      border-top  1px solid#717D85 ; 
      颜色 #FFF ; 
      字体粗体18px / 21px Helvetica,Arial,sans-serif ; 
      保证金 0 ; 
      填充 2px 0 0 12px ; 
      职位 -webkit-sticky ; 
      位置; 
       -1px ; 
    }
    

     

     
  • 相关阅读:
    WinForm DevExpress使用之ChartControl控件绘制图表二——进阶
    正则表达式(JavaScript)
    WinForm DevExpress使用之ChartControl控件绘制图表一——基础
    Git常用命令总结
    CSS样式设置小技巧
    java Socket编程
    java synchronized详解
    SpringBoot应用整合ELK实现日志收集
    mongoDB中的的常用语法
    使用Nginx做图片服务器时候,配置之后图片访问一直是 404问题解决
  • 原文地址:https://www.cnblogs.com/ggmh/p/9807226.html
Copyright © 2011-2022 走看看