position:sticky  粘性定位

　　top:200px 　　这是他的阈值，意思是当我们页面滚动到 200 像素的使用，我们的元素会自动变成固定定位，不到200像素的时候，我们的元素走的是相对定位

　　left：200px　　同理

　　有个权限问题：top 和 bottom 同时设置，以 top 优先

　　　　　　　　　left 和 right 同时设置　　以 left 优先

粘性定位 sticky的更多相关文章

  1. 关于CSS的粘性定位sticky失效问题

    CSS的粘性定位sticky可以起到吸顶灯的作用,用法如下 <body> <div> <nav style="postion:sticky; top: 0;&q ...

  2. sticky，粘性定位

    position:sticky,粘性定位:可以说是relative和fixed的结合: 滑动过程中,元素在显示窗口内则在其本身的位置,超出元素所在位置则显示在设定的sticky位置. 使用: #id ...

  3. position:sticky 粘性定位的几种巧妙应用

    背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...

  4. sticky -- position定位属性sticky值之粘性定位；

    sticky简述 sticky 是css定为新增的属性:可以说是相对定位relative和固定定位fixed的结合: 它主要用在对scroll事件的监听上,简单说在滑动过程中,某个元素的距离其父元素的 ...

  5. CSS粘性定位

    粘性定位(position:sticky) 1.定义 粘性定位可以被认为是相对定位和固定定位的混合.元素在跨越特定阈值前为相对定位,之后为固定定位.(MDN传送门) 这个特定阈值指的是 top, ri ...

  6. 0029 定位：position（相对、绝对、固定、绝对定位盒子居中、z-index、绝对定位改变display属性）

    目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 -- 就是 ...

  7. CSS定位布局

    CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...

  8. CSS 定位总结

    目录 元素显示模式 元素模式 元素显示模式转换 CSS定位机制 静态定位static 相对定位relative 绝对定位absolute 固定定位fixed 粘性定位sticky 定位小结一图流 CS ...

  9. 走在深夜的小码农 Seventh Day

    Css3 Seventh Day writer:late at night codepeasant 学习大纲: 1. 定位(position) 介绍 1.1 为什么使用定位 我们先来看一个效果,同时思 ...

随机推荐

  1. AngularJS入门教程之与服务器(Ajax)交互操作示例

    AngularJS从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一 ...

  2. h5常见

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面//一.HTML页面结构<meta name="viewport" content="widt ...

  3. Ubuntu下双显示器设定

    自8.10后的版本,系统自带了xrandr工具,可以很好的实现双显示器.配置与使用如下: 介绍    X Windows 中有一个显示分辨率的概念,在默认情况下,这个显示分辨率为 max*max ,m ...

  4. 记录一次OOM排查经历

    我是用了netty搭建了一个UDP接收日志,堆启动配置 Xmx256  Xms256 ,项目刚启动的时候,系统进程占用内存很正常,在250M左右. 长时间运行之后发现,进程占用内存不断增长,远远超过了 ...

  5. linux基础6-bash shell编程

    1. type [-ta] name 一般情况下,type命令被用于判断另外一个命令是否是内置命令,但是它实际上有更多的用法. 1.1.判断一个名字当前是否是alias.keyword.functio ...

  6. SpringBoot LoggerFactory is not a Logback LoggerContext but Logback is on the classpath

    SpringBoot 在启动项目的时候一起错误: SLF4J: Class path contains multiple SLF4J bindings.SLF4J: Found binding in ...

  7. ICPC2019上海站游记

    银牌第4,差4名拿金 金牌就保研国奖,银牌就什么都没有 最痛苦的是功败垂成 也许签到罚时太多罢,也许构造做得太晚罢,也许J题没有做出来罢 翻来覆去,似乎也想不到得金的理由 福兮祸所倚 年轻人多遇到点挫 ...

  8. java之jvm

    1.JVM内存模型 线程独占:栈,本地方法栈,程序计数器线程共享:堆,方法区 回答以上问题是需回答两个要点:1. 各部分功能2. 是否是线程共享 2.JMM与内存可见性JMM是定义程序中变量的访问规则 ...

  9. charles设置截图及常见问题汇总

    常见问题: 1.手机配置charles代理后,手机无法上网,无法访问chls.pro/ssl,解决办法:关闭电脑防火墙: 关闭后即可上网. 2.设置代理请求,charles看不到任何请求,解决办法:p ...

  10. python 2.7安装pygame报错解决办法pygame-1.9.4-cp27-cp27m-win_amd64.whl is not a supported wheel on this platform.

    python下载python安装包 https://www.lfd.uci.edu/~gohlke/pythonlibs/#pygame 下载完后进入cmd命令行执行安装,报错: pygame-1.9 ...