css-sticky 定位
前言
我们大多都了解绝对定位、相对定位、static 和 fixed 定位，而 sticky 定位常常会被忽略，本文来总结一下其相关使用方法。
正文
1、常见使用效果
我们滚动滚动条时，当 “ 我是粘性定位！” 的元素在触顶之后，他却没有继续向上滑动，而停留在可视区域内，这种实现效果就需要通过 sticky 定位来实现。
2、sticky 定位详解
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix
基于上面的概念，我们先来认识四个元素：
使用注意：
（1）必须指定 top, right, bottom 或 left 中的任何一个值，否则不会生效，相当于设置 相对定位
（2）垂直滚动时，粘性约束元素的高度要大于 sticky 元素的高度
（3）粘性约束元素和容器元素之间不能存在overflow:hidden 的元素，如下：
<div class="viewport">
<div class="container"> <!-- 容器元素 -->
<div style="overflow: hidden">
<div> <!-- 粘性约束元素 -->
<div class="stick-elem">...</div> <!-- sticky 元素 -->
...
</div>
</div>
</div>
</div>
3、常见使用方法
粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上。这样，用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体验。
下面代码实现文章开头的定位效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body> <p>滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p> <div class="sticky">我是粘性定位!</div> <div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div> </body>
</html>
总结
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
css-sticky 定位的更多相关文章
- CSS布局：sticky定位
stick定位一如其名:它随“正常”文档流而动,直到规定位置,尔后“粘”在那里:或者,当它发现自己可以跟随“正常”文档流而脱离sticky位置时,就果断离开从而加入文档流. 代码与效果如下: < ...
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- CSS Sticky 其实很简单
为什么要写这篇文章 Sticky 也不是新知识点了,写这篇文章的原因是由于最近在实现效果的过程中,发现我对 Sticky 的理解有偏差,代码执行结果不如预期.决定写篇文章重新学习一次. 什么是 Sti ...
- CSS position定位属性
css中的position属性是用于设置元素位置的定位方式 它有以下几种取值: static:默认定位方式,子容器在父容器中按照默认顺序进行摆放 absolute:绝对定位,元素不占据父容器空间,相当 ...
- 教你玩转CSS Position(定位)
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...
- CSS Sticky Footer
----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局 http://www.w3c ...
- CSS 的定位方式和含义
CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...
- CSS中定位机制的想法
对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...
- 转：Selenium之CSS Selector定位详解
CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式. 百度输入框: <input name=&quo ...
- CSS 中定位的使用
position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...
随机推荐
- Prometheus TSDB存储原理
Prometheus 包含一个存储在本地磁盘的时间序列数据库,同时也支持与远程存储系统集成,比如grafana cloud 提供的免费云存储API,只需将remote_write接口信息填写在Prom ...
- 2022.02.21 UB
2022.02.21 UB 参考资料: https://zhuanlan.zhihu.com/p/141467895 https://blog.csdn.net/ghscarecrow/article ...
- PostgreSQL 数据库备份脚本
PostgreSQL 数据库备份脚本 #!/bin/bash # PG家目录(/opt/postgresql/pg96/) PG_HOME=${PGHOME} # pg数据库连接信息 PG_HOST= ...
- C3P0反序列化链学习
C3P0 c3p0第一次听闻是用于fastjson的回显上,大佬们总结三种方法,后面两种主要就是用于fastjson和jackjson的回显利用(注入内存马) http base jndi hex序列 ...
- 【第三课】常用的Linux命令（学习笔记）
4月8日 学习笔记打卡
- 我发现 Linux 文档写错了
作者:小林coding 图解计算机基础网站:https://xiaolincoding.com 大家好,我是小林. 周末的时候,有位读者疑惑为什么 Linux man 手册中关于 netstat 命令 ...
- python3 Softmax函数
Softmax函数公式 Softmax的作用简单的说就计算一组数值中每个值的占比 import torch import torch.nn.functional as F # 原始数据tensor y ...
- MySQL性能优化 - 别再只会说加索引了
MySQL性能优化 MySQL性能优化我们可以从以下四个维度考虑:硬件升级.系统配置.表结构设计.SQL语句和索引. 从成本上来说:硬件升级>系统配置>表结构设计>SQL语句及索引, ...
- vue 代码调试神器
一.序 工欲善其事,必先利其器.作为一名资深程序员,相信必有一款调试神器相伴左右,帮助你快速发现问题,解决问题.作为前端开发,我还很年轻,也喜欢去捣鼓一些东西,借着文章的标题,先提一个问题:大家目前是 ...
- 推荐三个好用的TamperMonkey洛谷插件
Part 1: TamperMonkey 插件 Part 1.1 什么是 Tampermonkey 在我们学习的过程中,往往想要更多功能,这时候可以使用 TamperMonkey 插件进行美化 官网介 ...