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. util之Set

    1.定义: Set<Integer>set = new TreeSet<Integer>(); 注意: TreeSet 是二差树实现的,Treeset中的数据是自动排好序的,不 ...

  2. 【译】写个好的 CLI 程序

    写个好的 CLI 程序 Write a Good CLI Program 译文 原文链接:https://qiita.com/tigercosmos/items/678f39b1209e60843cc ...

  3. Adobe 系列下载链接

    (注意!:在下方链接前加上 "pan.baidu.com/s/" 才是正确网址,用"百度网盘"下载) Photoshop 专区(图像处理软件) Adobe Ph ...

  4. Flink架构(四)- 状态管理

    状态管理 之前我们提到过大多数流应用是有状态的.很多operators会不断的访问并更新某中状态,例如一个window中收集了多少条记录,输入源中当前读到的位置,亦或是用户定义的特定operators ...

  5. Commercial Lighting: LED Ceiling Light, LED Ceiling Light

    Unlike ceiling lamps, floor lamps, chandeliers, lamps that can sometimes rely on "faces", ...

  6. 百炼OJ - 1007 - DNA排序

    题目链接:http://bailian.openjudge.cn/practice/1007 #include<stdio.h> #include<algorithm> usi ...

  7. 【网易官方】极客战记(codecombat)攻略-地牢-循环又循环

    关卡连接: https://codecombat.163.com/play/level/loop-da-loop 循环真是救命恩人! 简介: 你只需要 一个 while true循环 加上 4 条语句 ...

  8. app项目中遇到TCP分包,H5端对分包进行拼包

    之前有个需求,由于H5端不支持TCPSocket通信,于是中间搭了个安卓框架作为通信的介质,在开发中遇到一个问题,当后端传一个比较大的数据上来时,一条完整的数据会没有规矩的分成若干个包,每条数据可能不 ...

  9. C++转换构造函数和隐式转换函数

    今天是第一次听到C++还有个转换构造函数,之前经常见到默认构造函数.拷贝构造函数.析构函数,但是从没听说过转换构造函数,隐式转换函数也是一样,C++的确是够博大精深的,再次叹服!          其 ...

  10. IDE - IDEA - 代码缩进设置

    1. 概述 Idea 的代码缩进设置 2. 场景 最近进场会从别的地方找到代码, 然后导入 Idea 时长出现 缩进的问题 会 弹出 以下提示 # 后面还有 3 个 可选按钮 this file in ...