MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/position position:sticky;是粘性定位,新的定位方式,专门用于页面滚动的时候的定位,可以方便实现吸顶条的效果。 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。 #one { position: sticky; top: 10px; } 在viewport...
在MDN中可以看到,sticky元素的嵌入式属性不能全是auto,否则它的效果就相当于relative: Note:At least oneinsetproperty (top,inset-block-start,right,inset-inline-end, etc.) needs to be set to a non-autovalue for the axis on which the element needs to be made sticky.If bothinsetproperties for an...
先说一下sticky这个属性的定义 sticky: 元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和containing block(最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top,right,bottom, 和left的值进行偏移。偏移值不会影响任何其他元素的位置。 MDN是这么解释的.专业性...
MDN对于粘性定位说明有下面一段话,一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时),即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为。 下面我们研究祖先设置不同overflow/height,对粘性定位元素的影响。
MDN是这么解释的.专业性有点强,可能不太好理解.但如果说它的最长的用途,大家都知道,那就是吸顶固定. 就是下面这个效果 该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时...
position:sticky粘性定位 项目中可能会遇到这样的需求:当页面某个元素滚动到顶部时,让其定位或悬浮在顶部,如下图红框区域所示: 方式一:C3新属性,position:sticky 实现以上效果的最简单方式,是使用C3提供的新属性position:sticky。然后设置top值等于顶部导航的高度即可。同理,根据效果可以设置 right,bottom,left。 MDN...
仅仅想记录一下sticky,来自于MDN! 定位类型 static 该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 relative 该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在...
position的定位类型有:static(默认值)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)、sticky(粘性定位)。 其中最常用的就是relative和absolute了。我们先来区别一下相对定位和绝对定位,最后再详细讲解其它取值分别是什么意思。 导读: position的定位类型有:static(默认值)、relative(相对定位)、absolute(绝...
其实,上面这句话已经将 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:sticky(戳我查看MDN解释): 1 2 3 { position: sticky; } 卧槽,什么来的? 前端发展太快,新东西目接不暇,但是对于有趣的东西,还是忍不住一探究竟。(只怪当初...) 初窥position:sticky sticky 英文字面意思是粘,粘贴,所以姑且称之为粘性定位。下面就来...