zoukankan      html  css  js  c++  java
  • 使用 position:sticky 实现粘性布局

    初窥 position:sticky

    sticky 英文字面意思是粘,粘贴,所以姑且称之为粘性定位。下面就来了解下这个处于实验性的取值的具体功能及实用场景。

    这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。

    什么是结合两种定位功能于一体呢?

    元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。

    而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

    这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

    嗯,看看上面的 CSS 代码,只需要给每个内容区块加上:

    1 {
    2     position: -webkit-sticky;
    3     position: sticky;
    4     top: 0;
    5 }

    就可以轻松实现了。

    简单描述下生效过程,因为设定的阈值是 top:0 ,这个值表示当元素距离页面视口(Viewport,也就是fixed定位的参照)顶部距离大于 0px 时,元素以 relative 定位表现,而当元素距离页面视口小于 0px 时,元素表现为 fixed 定位,也就会固定在顶部。

    具体请阅读:https://www.cnblogs.com/coco1s/p/6402723.html

  • 相关阅读:
    判断二叉树是否BST
    树基础训练(一)
    Trie 简介
    二叉树的一些补充
    红黑树
    平衡二叉树(AVL)介绍及其实现
    二叉查找树(BST)的实现
    二叉树基本知识
    微信小程序提示框
    urllib3使用指南
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/14980689.html
Copyright © 2011-2022 走看看