MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/position position:sticky;是粘性定位,新的定位方式,专门用于页面滚动的时候的定位,可以方便实现吸顶条的效果。 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。 #one { position: sticky; top: 10px; } 在viewport...
MDN对于粘性定位说明有下面一段话,一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时),即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。 下面我们研究祖先设置不同overflow/height,对粘性定位元素的影响。
position的定位类型有:static(默认值)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、sticky(粘性定位)。其中最常用的就是relative和absolute了。我们先来区别一下相对定位和绝对定位,最后再详细讲解其它取值分别是什么意思。 相对定位和绝对定位 先看看MDN上是怎么解释它们的: 相对定位:相对定位的元素是在...
sticky: 元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。 MDN是这么解释的.专业性有点强,可能不太好理解...
仅仅想记录一下sticky,来自于MDN! 定位类型 static 该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 relative 该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在...
sticky会在用户滚动页面时产生作用,它的偏移量会自动调整,这是因为在滚动过程中参照点不是固定的,这是与relative、absolute和fixed最大的不同。它的偏移量是相对于最近的滚动容器的滚动口。 在MDN中可以看到,sticky元素的嵌入式属性不能全是auto,否则它的效果就相当于relative: Note: At least one inset property ...
position的定位类型有:static(默认值)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、sticky(粘性定位)。 其中最常用的就是relative和absolute了。我们先来区别一下相对定位和绝对定位,最后再详细讲解其它取值分别是什么意思。 导读: position的定位类型有:static(默认值)、relative(相对定位)、absolute(绝...
没了吗?偶然发现其实还有一个处于实验性的取值,position:sticky(戳我查看MDN解释): 1 2 3 { position: sticky; } 卧槽,什么来的? 前端发展太快,新东西目接不暇,但是对于有趣的东西,还是忍不住一探究竟。(只怪当初...) 初窥position:sticky sticky 英文字面意思是粘,粘贴,所以姑且称之为粘性定位。下面就来...
其实,上面这句话已经将 sticky 说的很清楚了,至于将 sticky 看做是 relative 和fixed 的结合体最早应该来源于 MDN 中的描述原文如下: This is basically a hybrid between relative and fixed position. It allows a positioned element to act like it's relatively positioned until it's scrolled to a certa...
粘性布局: 结合了 position:relative 和 position:fixed 两种定位于一体的特殊定位,适用于一些特殊场景。具体说明可查看MDN-position 如下图: 要求滑动时固定第一行 ,第一列 样例.png 滑动后.png position:sticky;/* 实现粘性布局 */top:100px;/* 固定的位置为距离顶部100px的位置,当设置区域滑动到距离父窗口顶...