css-position之fixed  vs sticky

fixed（固定定位）

元素相对于浏览器窗口是固定的，即使是窗口滚动，元素也是固定的

sticky（粘性定位）

基于用户滚定动来进行定位的，相当于relative定位 fixed定位的结合体

当未超过阈值的时候，他的行为就像relative，当超过特定阈值是他的行为就像fixed。

阈值是left，right，top，bottom（必须制定其一，才能使粘性定位生效，否则其行为与relative相同）

sticky事例：

1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8">

 5 <title>sticky</title>

 6 <style>

 7 div .sticky {

 8 

 9   position: sticky;

10   top: 0;

11   padding: 5px;

12   background-color: #cae8ca;

13   border: 2px solid #4CAF50;

14 }

15 </style>

16 </head>

17 <body>

18

19 <p>尝试滚动页面。</p>

20

21

22 <div class="sticky">我是粘性定位!</div>

23

24 <div style="padding-bottom:2000px">

25   <p>滚动我</p>

26   <p>来回滚动我</p>

27   <p>滚动我</p>

28   <p>来回滚动我</p>

29   <p>滚动我</p>

30   <p>来回滚动我</p>

31 </div>

32

33 </body>

34 </html>

css-position之fixed vs sticky的更多相关文章

  1. (转)实例详解CSS中position的fixed属性使用

    关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...

  2. CSS中position属性介绍（新增sticky）

    position的含义是指定类型,取值类型可以有:static.relative.absolute.fixed.inherit 和 sticky,这里sticky是CSS3新发布的一个属性. 1.po ...

  3. css position sticky All In One

    css position sticky All In One css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz ref ...

  4. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

  5. 解决IE6下Position：fixed问题(只用css)

    在IE6.0及以下版本的浏览器里是不支持position:fixed.而在IE7,IE8,firefox,opera,chrome都可以完美的支持此特性的.解决此问题的要点主要有: 1).容器要有一个 ...

  6. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  7. css position相对定位与绝对定位彻底搞懂

    定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...

  8. fixed和sticky

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>f ...

  9. CSS Position（定位）

    CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed ab ...

  10. css position 5种不同的值的用法

    position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性). 有五种不同的值: static relative fixed absolute sticky ...

随机推荐

  1. FarmCraft --（树形DP）

    题目描述 In a village called Byteville, there are houses connected with N-1 roads. For each pair of hous ...

  2. Java 虚拟机运行时数据区

    写在前面 本文描述的有关于 JVM 的运行时数据区是基于 HotSpot 虚拟机. 概述 JVM 在执行 Java 程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以 ...

  3. SpringBoot 入门：项目属性配置

    开发一个SpringBoot 项目,首当其冲,必然是配置项目 一.项目属性配置 1. SpringBoot自带了Tomcat服务器,通过使用项目配置文件来修改项目的配置,如图配置了部署在80端口,目录 ...

  4. 手工注入——sql server (mssql)注入实战和分析

    前言 首先要对sql server进行初步的了解.常用的全部变量@@version:返回当前的Sql server安装的版本.处理器体系结构.生成日期和操作系统.@@servername:放回运行Sq ...

  5. python-nmap 使用基础

    前言 python-nmap是一个Python库,可帮助您使用nmap端口扫描程序.它可以轻松操纵nmap扫描结果,将是一个完美的选择想要自动执行扫描任务的系统管理员的工具和报告. 它还支持nmap脚 ...

  6. flask-文件上传的使用

    flask-文件上传 在flask中使用request.files.get来获取文件对象 对获取到的文件对象可以使用save(filepath)方法来保存文件 上传的文件在保存前需要对文件名做一个过滤 ...

  7. Vue-CLI 3.x 自动部署项目至服务器

    前言 平时部署前端项目流程是:先部署到测试环境ok后再发布到生产环境上,部署到测试环境用 xshell 连上服务器,然后用 xftp 连接服务器,然后本地 build 项目,接着把 build 好的文 ...

  8. tf.train.MomentumOptimizer 优化器

    tf.train.MomentumOptimizer( learning_rate, momentum, use_locking=False, use_nesterov=False, name='Mo ...

  9. OSI 七层模型以及TCP/IP模型

    OSI 七层模型 定义 OSI(Open System Interconnection)即开放式系统互联通信参考模型.该模型是国际标准化组织(ISO)制定的一个用于计算机或通信系统间互联的标准体系,一 ...

  10. 极简教程！教你快速将K3s与Cloud Controller集成

    作者: Dawid Ziolkowski,云原生工程师 原文链接: https://itnext.io/how-to-integrate-k3s-with-the-cloud-controller-3 ...