position: sticky 详解

sticky 的本意是粘糊糊的，但在 css 中的表现更像是吸附。**常见的吸顶、吸底（移动端网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。**例如下图中的导航，也可以点链接看实际效果。

导航的效果更像是在页面打开的时候是 relative 的，向下滑动的时候 fixed 并且 top：0 为零。

而 sticky 代码仅需要如下：

.sticky {position: sticky;position: -webkit-sticky;top: 0;
}

.searchAndTab {position: sticky !important;top: 0;
}

特性（坑）

1、sticky 不会触发 BFC。如果不知道 BFC 可以看这里
样式表 z－index 无效。行内 style 写有效。
sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效。强调这一点是因为在实际使用中，碰到 body 设置 height：100% 的时候 sticky 元素停在某一个位置不动了。

position: sticky 详解相关推荐

css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
HTML中元素的position属性详解
HTML中元素的position属性详解转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定位属 ...
position属性详解
1.static 这是属性是positon的默认值,如果一个div我们没有给他任何的position,那么他不会脱离文档流,他的属性就是static,不理解这个我就没的说了... 2.abso ...
position:absolute详解
position:absolute 日常开发中经常涉及元素的定位,我们都知道,绝对定位相对于最近position不为static的父级元素来定位,但其中定位的位置还是有细微的差别的. 绝对定位根据le ...
Kooboo CMS - Html.FrontHtml.Position 详解
DataContract 数据契约 http://www.cnblogs.com/Gavinzhao/archive/2010/06/01/1748736.html https://msdn.micr ...
Swin-Transformer网络结构详解
文章目录 0 前言 1 网络整体框架 2 Patch Merging详解 3 W-MSA详解 MSA模块计算量 W-MSA模块计算量 4 SW-MSA详解 5 Relative Position Bi ...
Html div和span详解
div和span的区别 div: div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. Span: span是一个内联元素,没有实际 ...
详解 CSS position定位的五种方式
position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). 常见的固定定位,例如手机端的导航,快捷按钮.例如本站的&quo ...
CSS中position详解与常见应用实现
在web前台开发时候,我们必不可少的会用到postion属性进行布局定位. 今天总结了一下position知识点,与常用功能与大家分享,欢迎大家交流指正. 首先我们对postion属性进行详解. 在C ...
z-index失效的几种情况，父标签position属性为relative的时候,详解
网上对这一方面解释的很多,我也不想把别人的抄过来.在这里是加上我对这些情况的理解还有我的一些疑惑,若有问题,请留言,谢谢!!!话不多说,进入正题: 文章重点:z-index失效的一类情况:父标签pos ...

position: sticky 详解

特性（坑）

position: sticky 详解相关推荐

最新文章

热门文章