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.如果没有定位偏移量,对元 ...
随机推荐
- php第一次实验个人博客网站的设计编写①
先上效果图: 网页代码:index.html <!DOCTYPE html> <html lang="en"> <head> <m ...
- 2021.11.10 P5231 [JSOI2012]玄武密码（AC自动机）
2021.11.10 P5231 [JSOI2012]玄武密码(AC自动机) https://www.luogu.com.cn/problem/P5231 题意: 给出字符串S和若干T,求S与每个T的 ...
- List实现类
List实现类: ArrayList; 数组结构实现,查询快,增删慢 JDK1.2版本,运行效率快,线程不安全 Vector: 数组结构实现,查询快,增删慢 JDK1.0版本,运行效率慢,线程安全 ...
- 1.17 想学好Linux，这些习惯必须养成（初学者必读）
不管是在生活还是工作中,每个人都会逐渐养成一些小习惯.坏习惯一旦形成就很难改正,所在在系统学习 Linux之前,给大家一些建议,刻意去培养一些好的习惯,对自己是很有利的. 学习Linux,要习惯使用命 ...
- 等了整整12年！Linux QQ昨天终于更新了！
一个执着于技术的公众号 前言 2020年4月1日,腾讯QQ Linux版迎来最新版发布,详细版本号为v2.0.0 Beta2.上一个版本v2.3.2发布于2019年10月24日,时隔160天又迎来了更 ...
- 真香！Windows 可直接运行 Linux 了
点击关注上方"开源Linux", 后台回复"读书",有我为您特别筛选书籍资料~ 之前了解过一些适用于Linux的Windows子系统,最近又听人提起,于是在自己 ...
- HMS Core分析服务助您掌握用户分层密码，实现整体收益提升
随着市场愈发成熟,开发者从平衡收益和风险的角度开始逐步探索混合变现的优势,内购+广告就是目前市场上混合变现的主要方式之一. 对于混合变现模式,您是否有这样的困惑: 如何判断哪些用户更愿意看广告.哪些用 ...
- KD-Tree及希尔伯特空间填充曲线的应用
引言 我们可能会有这样的一种需求,像是打车软件中呼叫附近的车来接送自己,或者是在qq中查看附近的人.我们都需要知道距离自己一定范围内的其它目标的集合.如果将上面举例的功能抽象出来,就是要实现以某个点为 ...
- 数据管理技术发展，数据库应用发展史，数据库分类，MySQL
计算机数据管理技术发展 1. 自由管理阶段 用户以文件形式将数据组织起来,并附属在各自的应用程序下. 1.数据不保存 当时计算机主要用于科学计算,一般不需要将数据长期保存,只是计算某一课 ...
- 一次 HTTP 请求就需要一次 TCP 连接吗？
一次 HTTP 请求就需要一次 TCP 连接吗? 本文写于 2021 年 2 月 9 日 太长不看版本:短连接需要,长连接不需要. 一次 HTTP 请求就需要一次 TCP 连接吗? TCP 的连接与断 ...