粘性固定属性 -- position:sticky
概述
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的更多相关文章
- css3新属性position: sticky 一分钟实现 导航栏悬停功能
css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...
- 使用 position:sticky 实现粘性布局
如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: ab ...
- 粘性固定 position:sticky
在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky,它是相对定位(position:relative)和固定定位(position ...
- css属性position: static|relative|absolute|fixed|sticky简单解析
目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...
- CSS使用position:sticky 实现粘性布局
简介 前面写了一篇文章讲解了position常用的几个属性:<CSS 属性之 position讲解>一般都知道下面几个常用的: { position: static; position: ...
- 用position: sticky 实现粘性元素区域悬浮效果(转)
用position: sticky 实现粘性元素区域悬浮效果 原创 2017年08月02日 20:04:13 161 在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头 ...
- position:sticky属性测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- position:sticky 粘性定位的几种巧妙应用
背景:position: sticky 又称为粘性定位,粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换.元素根据正常文档流进行 ...
- position:sticky粘性布局
新的布局方式,专门用于 tab栏悬浮效果: 当tab栏在可视区域时,正常滚动, tab栏不再可视区域时,悬浮置顶. position:-webkit-sticky; position:sticky; ...
随机推荐
- React安装 脚手架create-react-app安装步骤及问题
create-react-app 是来自于 Facebook的脚手架,通过该命令我们无需配置就能快速构建 React 开发环境. 安装步骤: 1.先装脚手架 PS:第一次装直接在打开CMD默认 ...
- idiom的学习笔记(一)、三栏布局
三栏布局左右固定,中间自适应是网页中常用到的,实现这种布局的方式有很多种,这里我主要写五种.他们分别是浮动.定位.表格.flexBox.网格. 在这里也感谢一些老师在网上发的免费教程,使我们学习起来更 ...
- Linux学习笔记(Redhat)
一.开始 linux平台上的开发 vi.gcc.gdb.make.jdk.tomcat.mysql. linux基本操作 c语言功底<c专家编程>和java语言 学习unix高级编程 &l ...
- Caffe+UbuntuKylin14.04_X64+CUDA 6.5配置
在编译Caffe的漫长过程中,经过了一个又一个坑,掉进去再爬出来,挺有趣的.对比原文有修改! LInux下配置安装:(本文档使用同一块NVIDIA显卡进行显示与计算, 如分别使用不同的显卡进行显示和计 ...
- UML+模式设计概述
转自于:http://blog.csdn.net/rexuefengye/article/details/13020225 工程学:工程庞大到一定程度必须是用工程学方法,好比直接用水泥沙子建设实用的摩 ...
- swift的计算属性和懒加载
计算属性每次都重新计算. 懒加载只计算一次. 可以借助backing store将计算属性转化为懒加载属性. 计算属性实质上退化为函数调用. 计算属性的标示是get.set.
- IOS Html富文本渲染方式:DTCoreText、WKWebView、UIWebView的内存占用对比
在app的内容页(详情页)中,富文本的显示一直是经常需要处理的问题,而通常在后端的富文本编辑中,Html应用比较普遍,所以其实需要处理的Html富文本显示的问题,以下这三种方式肯定不是最优的显示Htm ...
- RxSwiftライブラリの作り方 〜Observer/Observable編〜
RxSwiftライブラリの作り方をご紹介します.一つの記事ですべてを説明するのは非常に厳しいので.まず Observer や Observable といった基本的なコンポーネントとその周辺について.ひ ...
- 应用一:Vue之开发环境搭建
简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...
- 脚本_部署LNMP平台
#!bin/bash#功能:部署LNMP平台,实际运行脚本时,需要去除备注.#作者:liusingbonfunction menu { //定义函数menu ...