zoukankan      html  css  js  c++  java
  • 6th week blog3

    sticky:The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of toprightbottom, and left. The offset does not affect the position of any other elements.This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hiddenscrollauto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior .

    该元件根据文档的正常流动定位,然后偏移相对于它的最近的祖先滚动包含块(最接近的块级祖先),包括表相关的元素的基础上的值toprightbottom,和left。偏移量不会影响任何其他元素的位置。此值始终创建新的堆叠上下文。需要注意的是粘性元素“大棒”,以具有“滚动机制”,其最近的祖先(创建时overflowhiddenscrollauto,或overlay),即使祖先是不是最近的实际滚动的祖先。这有效地抑制了任何“粘性”行为。

    个人理解:sticky的用法,例如网页中两侧的广告,上下滑动页面时,它的位置不会变。

    与fixed的区别:

    fixed:固定的位置。一般用作悬浮按钮的设计。不管当前页面如何滚动,它的位置始终相对于窗体不变。

    sticky:粘贴到某个位置。当组件设置了该属性值后,当页面滑动时,组件会跟着页面移动,当组件触及到窗体后,页面若继续滑动,组件则处在与窗体接触的位置不动。

    区别:在视口范围时该元素的位置并不受到定位影响(设置top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

  • 相关阅读:
    HDU 2122 HDU Today(dijkstra+map)
    DEDECMS后台传附件图片出现Upload filetype not allow解决办法
    织梦dedecms如何显示所有文章列表
    dedeCMS标签调用技巧和大全
    dedecms二次开发总结 变量参数
    dedecms上传图片相对路径改成绝对路径方法
    织梦Dedecms网站后台无法上传图片的步骤详解
    dedecms列表页调用当前文档的tags并带链接
    dedecms 自动获取缩略图
    dedecms网站转移(更换空间转移数据方法)
  • 原文地址:https://www.cnblogs.com/shengbowen1004/p/9785907.html
Copyright © 2011-2022 走看看