position的属性有哪些?

{
  position: static;
  position: relative;
  position: absolute;
  position: fixed;

position: inherit;
  position: initial;
  position: unset;

}

还有一个position的属性值:position: sticky

position: sticky;粘性定位,是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。著作权归作者所有。

注意:

1、position: sticky还是一个实验性的属性值。著作权归作者所有。

2、粘性定位的固定定位并不一定是position:fixed,只有目标元素的任意父元素都没有设置position:relative | absolute | fixed | sticky的情况下,才与position: fixed表现一样。而当其任一父元素设置了position:relative | absolute | fixed | sticky时,目标元素是相对于父元素的固定。

参考来源:http://ghmagical.com/article/page/id/3GkrXEZVxLHK

纯CSS实现吸顶效果的更多相关文章

  1. css sticky & 吸顶效果

    css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz css position sticky not working ht ...

  2. Html吸顶效果

    Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...

  3. js 实现吸顶效果 || 小程序的吸顶效果

    小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...

  4. 自定义tab吸顶效果一(原理)

    PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...

  5. 基于scroll的吸顶效果

    本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...

  6. better-scroll之吸顶效果巨坑挣扎中

    今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下  这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...

  7. js之吸顶效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  9. [RN] React Native 头部 滑动吸顶效果的实现

    React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...

随机推荐

  1. TCP/IP详解,卷1:协议--IP:网际协议

    引言 I P 是 T C P / I P 协议族中最为核心的协议.所有的 T C P.U D P.I C M P 及 I G M P 数据都以 I P 数据 报格式传输(见图 1 - 4).许多刚开始 ...

  2. [IOI2002] 任务安排

    题目链接 题意 一些不能改变顺序的任务被分成若干批,每批包含相邻的若干任务.第 $i$ 个任务单独完成所需的时间是 $T_i$.在每批任务开始前,机器需要启动时间 $S$,而完成这批任务所需的时间是各 ...

  3. Makefile文件(DE1-soc软件实验”hello_word")

    DE1-soc软件实验”hello_word"中,hello_word此程序很好理解,那Makefile文件又如何理解呢? 所要完成的Makefile 文件描述了整个工程的编译.连接等规则. ...

  4. Redis Distributed lock

    using StackExchange.Redis; using System; using System.Collections.Generic; using System.Linq; using ...

  5. Educational Codeforces Round 82 (Rated for Div. 2)E(DP,序列自动机)

    #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; ],t[]; int n,m; ][]; ...

  6. # E. Mahmoud and Ehab and the xor-MST dp/数学+找规律+xor

    E. Mahmoud and Ehab and the xor-MST dp/数学/找规律 题意 给出一个完全图的阶数n(1e18),点由0---n-1编号,边的权则为编号间的异或,问最小生成树是多少 ...

  7. AAC DRC

    DRC feature 在AAC decoder是optional.DRC info是在编码在fill element. Program reference level是进行DRC的一个参考值.是原始 ...

  8. Python记:列表和元组之序列相加

    _______________坐而论道,不如起而行之! 序列乘法运算示例:

  9. mysql和oracle建表语句以及数据类型的区别

    1.mysql和oracle建表语句的区别 mysql DROP TABLE IF EXISTS `order`;CREATE TABLE `order` (  `id` int(11) NOT NU ...

  10. 13.56Mhz下50欧姆阻抗匹配简易教程

    阻抗匹配(impedance matching) 主要用于传输线上,以此来达到所有高频的微波信号均能传递至负载点的目的,而且几乎不会有信号反射回来源点,从而提升能源效益.信号源内阻与所接传输线的特性阻 ...