zoukankan      html  css  js  c++  java
  • 关于css中position的两个属性值sticky和fixed的不同

    原文件中:

    fixed:The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transformperspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filtercontributing to containing block formation.) Its final position is determined by the values of toprightbottom, and left.This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

    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 (see the Github issue on W3C CSSWG).

    Sticky可以使用参数,是位置跟relative使用参数的效果是一致的,都是相对于static的变化;sticky具有“滚动机制”。

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

    fixed相对于视口定位,不管视口如何滚动,它的位置始终不变,而sticky则是在目标区域内随着页面的滚动而滚动,超出这个区域后就跟fixed一样不管视口如何滚动位置始终不变

  • 相关阅读:
    Spring Data JPA 入门篇
    44444444444444444444444444444444dddddddddd66666666666666666666666666
    1111111111111
    第二个随笔啊
    我的第一个Node web程序
    centos 6 不能上网
    开通博客园
    【转载】【超详细教程】使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结
    Ajax返回值之XML、json类型
    XHR详细讨论
  • 原文地址:https://www.cnblogs.com/zj1997/p/9786829.html
Copyright © 2011-2022 走看看