概述

position: sticky,这是一个比较容易忽略的css3 position 新属性,它的作用即为实现粘性布局,它是 relative 与 fixed 的结合。

用法

默认情况下,其表现为relative,在视窗与设置了该属性的元素之间,达到或超过其预设的 top、bottom、left、right,本属性会转变成 fixed,使 sticky 固定。

例如:

.menu{
position:sticky;
top: 0px;
}

例子中,设置 top 为 0,会表现为,页面滚动至 menu 的顶端时,menu 变为 fixed 固定在页面上方,效果如下:

生效条件

1. 父元素无论如何设置,必须表现为 visible 效果(注意 unset、auto、inherit、initial)

2. 必须设置 top、bottom、left、right 4个值之一,否则只会处于相对定位

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

4. sticky 元素仅在其父元素内生效

5. 注意 sticky 元素的位置,比如它如果在父元素最下方,那么其 top、bottom 可能会失效

兼容性(2019.4.15)

粘性固定属性 -- position:sticky的更多相关文章

  1. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  2. 使用 position:sticky 实现粘性布局

    如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...

  3. 粘性固定 position:sticky

    在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky,它是相对定位(position:relative)和固定定位(position ...

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

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

  5. CSS使用position:sticky 实现粘性布局

    简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...

  6. 用position: sticky 实现粘性元素区域悬浮效果(转)

    用position: sticky 实现粘性元素区域悬浮效果 原创 2017年08月02日 20:04:13 161 在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头 ...

  7. position:sticky属性测试

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  9. position:sticky粘性布局

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

随机推荐

  1. css浮动导致的高度塌陷问题及清楚浮动的方法

    浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...

  2. Android开发笔记(7)——Intent启用应用软件

    转载请注明:http://www.cnblogs.com/igoslly/p/6844154.html Intent启用应用软件 intent可以用来要求其他应用组件完成特定工作,如相机.电话.地图等 ...

  3. 读书笔记8-浪潮之巅(part3)

    浪潮之巅 ——风险投资 <浪潮之巅>的前半部分列举了在现代史上举足轻重的几家大型科技公司的历史,虽说成功的公司各有各的绝招,但是读多之后又略显重复.无聊(这不是说原书的内容.描述是无聊的, ...

  4. mysql 主从错误情况与原因

    mysql 主从错误情况1,master 上删除一条记录是从库报错 找不到该记录引起原因:master出现宕机或者从库已经删除.解决方案:stop slave;set global sql_slave ...

  5. 使用Windows上Eclipse远程调试Linux上的Hadoop

    一.设置Eclipse运行用户     如果以与Hadoop运行用户名(比如grid)不同的用户运行Eclipse,则无法对Hadoop运行用户所属的文件进行管理,运行Map/Reduce程序也会报& ...

  6. VS2012 编译 boost1.53/ boost1.49

    原文链接:http://blog.csdn.net/ly131420/article/details/8904122 一.下载Boost库 boost_1_53_0.zip   (http://www ...

  7. 将自己的类封装为lib的方法

    前言: Windows API中所有的函数都包含在dll中,其中有3个最重要的DLL. (1)   Kernel32.dll 它包含那些用于管理内存.进程和线程的函数,例如CreateThread函数 ...

  8. Kafka学习笔记(5)----Kafka的Consumer

    1. Pull vs Push Producer主动的通过push将消息发布到Broker上,Consumer通过Pull的的方式从Broker消息消息. 通过Push的方式由于是一有消息就推到Bro ...

  9. 文字左右滚动选择,改变direction的值

    1.从左到右滚动显示<marquee direction=left>测试</marquee> 2.从右到左滚动显示<marquee direction=right> ...

  10. MongoDB 学习笔记(三):分页、排序与游标

    一.分页 1.limit返回指定条数的数据 2.skip指定跨度 3.limit与skip结合,进行分页 二.排序 1.sort排序:指定排序的key,大于0为升序,小于0为降序.如果指定了多个排序键 ...