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. M - 湫湫系列故事——减肥记I

    M - 湫湫系列故事--减肥记I 对于吃货来说,过年最幸福的事就是吃了,没有之一! 但是对于女生来说,卡路里(热量)是天敌啊! 资深美女湫湫深谙"胖来如山倒,胖去如抽丝"的道理,所 ...

  2. Xshell连接Centos7

    13:53:10 2019-08-05 一个月暑假开始 学习搭建一个自己的博客 我是用阿里云的服务器搭建自己的博客 先利用XShell连接我的服务器 XShell下载地址:https://www.ne ...

  3. 03使用Want Weapp进行路由跳转

    因为这里使用的是第三方库,所以你要引入哈. 在app.json中引入哈. "usingComponents": { "van-cell": "@van ...

  4. docker-compose错误

    1.错误信息: ERROR: for gamehall Get https://hub.tondeen.com/v1/_ping: http: server gave HTTP response to ...

  5. Ubuntu 安装配置Dosbox

    1.安装dosbox sudo apt-get install dosbox 方法一: 2.挂载虚拟空间到dosbox的c盘 在linux终端输入dosbox,进入dosbox后输入 mount  c ...

  6. 37.4 net--TcpDemo2模拟用户登陆

    package day35_net_网络编程.tcp传输.模拟用户登录; import java.io.*; import java.net.InetAddress; import java.net. ...

  7. String 对象-->charAt() 方法

    1.定义和用法 charAt() 方法获取指定下标的字符,下标从0开始 语法: string.charAt(index) 参数: index:指定的下标 举例:获取下标为2的字符 var str = ...

  8. python selenium使用

    安装selenium #Python pip install selenium #Anaconda3 conda install selenium 下载浏览器版本对应的驱动文件 chrome chro ...

  9. 小程序wepy2 模拟vant PasswordInput, NumberKeyboard 密码输入框控件

    vant weapp小程序端控件目前是没有PasswordInput,NumberKeyboard的.实现效果: 数字键盘组件代码(keyboard.wpy): <template> &l ...

  10. STC15W串口通信的一些梳理

    由于控制串口1进行通信移植到串口3出现了阻力,因此很有必要对串口通信进行更进一步的梳理>>>> 一 STC15W串口对应引脚: 由此我们得到四个串口引脚分别为:串口1:P3 . ...