position:sticky,粘性定位;可以说是relative和fixed的结合;

滑动过程中,元素在显示窗口内则在其本身的位置,超出元素所在位置则显示在设定的sticky位置。

使用:

#id { position: sticky; top: 0; };

设置position:sticky,上下定位给一个(top,bottom,right,left)之一即可;左右定位需要两个值。

使用条件:

1、父元素不能overflow:hidden,overflow:auto,height:100%等属性。

2、上下定位给一个(top,bottom,right,left)之一即可;左右定位需要两个值,如(top:0;right:0;)。

3、父元素的高度不能低于sticky元素的高度。

4、sticky元素仅在其父元素内生效。

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

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

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

  2. 粘性定位 sticky

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

  3. sticky -- position定位属性sticky值之粘性定位;

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

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

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

  5. CSS粘性定位

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

  6. jquery.sticky 粘性滚动插件使用

    一个jQuery插件,使你能够做任何元素在您的网页上总是可见的,可以作为顶部固定导航显示插件. 官网地址:http://stickyjs.com/ github:https://github.com/ ...

  7. position:sticky粘性布局

    新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶. position:-webkit-sticky; position:sticky; ...

  8. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  9. html+css定位篇

    position absolute相对于父元素移动,不在父元素范围内时,可能和其他元素重叠 relative相对于初始位置来进行移动 fixed相对于浏览器进行定位,无论滑轮如何滚动,始终出现在浏览器 ...

随机推荐

  1. JVM 什么时候会full gc

    除直接调用System.gc外,触发Full GC执行的情况有如下四种.1. 旧生代空间不足旧生代空间只有在新生代对象转入及创建为大对象.大数组时才会出现不足的现象,当执行Full GC后空间仍然不足 ...

  2. manacher小结

    P3805 [模板]manacher算法 题目大意 n个字符组成的字符串,求最长回文串 $O$$($$n^3$$)$ 枚举两端点,暴力往中间搜 $O$$($$n^2$$)$ 枚举回文串终点,暴力往两边 ...

  3. <关于J2EE环境的搭建>在Fedora21下的Tomcat,Mysql,jdk以及Intellij的搭建过程

    题外话:一开始很不情愿写这种没有技术含量的博文,但是网上对于fedora21下的整个J2EE环境的搭建过程的文章实在是少之又少,那我就破个例吧:-p (一)JDK的下载及环境变量的设置 如果你对JDK ...

  4. sublime 相关配置和快捷键

    1.安装package control  点击sublime的菜单栏 view->show console :现在打开了控制台, 这个控制台有上下两栏, 上面一栏会实时显示sublime执行了什 ...

  5. codeforces 660B B. Seating On Bus(模拟)

    题目链接: B. Seating On Bus time limit per test 1 second memory limit per test 256 megabytes input stand ...

  6. CodeForces Div1: 995 D. Game(数学期望)

    Allen and Bessie are playing a simple number game. They both know a function f:{0,1}n→Rf:{0,1}n→R, i ...

  7. 推荐几个Laravel 后台管理系统

    小编推荐几个Laravel 后台管理系统 由百牛信息技术bainiu.ltd整理发布于博客园 一.不容错过的Laravel后台管理扩展包 —— Voyager 简介Voyager是一个你不容错过的La ...

  8. MySQL 学习三 关于转义

    DB2 LIKE谓词查询语句中支持 百分号(%).下划线(_)的使用,不支持方括号([])(注:它会把方括号当成实际的值而非通配符),当我们需要在LIKE 查询条件中将百分号(%).下划线(_)作为实 ...

  9. kindeditor Springmvc 整和解决图片上传问题

    1. 在编辑页面引入js <script type="text/javascript" charset="utf-8" src="${baseP ...

  10. python的logging模块详细使用demo

    import logging import os from logging import handlers from datetime import datetime class MyLog(): d ...