首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么固定覆盖作为粘性元素的子元素不覆盖其他粘性元素

固定覆盖(fixed positioning)是CSS中一种定位方式,它可以使元素固定在浏览器窗口或父元素中的位置,不随页面滚动而移动。粘性元素(sticky elements)是另一种CSS定位方式,它可以在页面滚动过程中切换其位置。

当一个元素被设置为固定覆盖,并且作为另一个粘性元素的子元素时,它不会覆盖其他粘性元素,而是保留在其原有的位置。这是因为粘性元素的定位方式相对于其最近的具有滚动机制的祖先元素,如果没有这样的祖先元素,则相对于视口进行定位。因此,固定覆盖的子元素不会影响其他粘性元素的定位。

这种行为可以理解为,固定覆盖元素和其他粘性元素是独立的层叠上下文(stacking context)。在层叠上下文中,元素的层叠顺序受到其z-index属性和DOM树结构的影响。因此,固定覆盖元素和其他粘性元素相对于父元素或视口的位置是相对独立的,它们之间不会相互遮挡。

总结起来,固定覆盖作为粘性元素的子元素不会覆盖其他粘性元素,这是因为它们分别相对于不同的祖先元素进行定位,属于独立的层叠上下文。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

对定位深入理解与应用

特点 不会像浮动一样脱离文档流,只是视觉上效果,不会对其他元素产生影响 定位元素层级比层级元素高,所有定位层级相同: 定位元素覆盖在普通元素上。...通过将父元素设置为相对定位(position: relative;),而将元素设置为绝对定位(position: absolute;),可以使元素定位基于父元素,而不是整个页面。...无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素粘性定位 如何设置为粘性定位 给元素设置 position:sticky 即可实现粘性定位。...粘性定位通常用于创建吸顶效果或侧边栏固定效果,当用户滚动页面时,元素会始终保持在视口内特定位置。...如果 z-index 值大元素,依然没有覆盖掉 z-index 值小元素,那么请检查其包含块层级。

8510

聊聊苹果营销页中几个有趣交互动画

粘性定位 sticky 可以简单认为是 「相对定位 relative」 和 「固定定位 fixed」 混合,元素在跨越指定范围前为相对定位,之后为固定定位。...之后,元素固定在与顶部距离 0px 位置。...其实这样我们就可以很清楚知道为什么 sticky 元素高度为什么不能等于它爸爸高度了,因为如果相等的话,粘性定位元素已经完全没有了实现粘性效果空间,也就相当于失效了。...注意点 当然使用 sticky 时候,我们需要注意几个点: 父级元素不能有任何 overflow:visible 以外 overflow 设置,否则没有粘滞效果。...思路大致是首先绘制第一张图片,作为底图,然后我们通过绘制第二张图片,覆盖掉部分第一张图片,这样就可以实现前面提到效果。

1.9K60

CSS中定位详解

如果父元素有定位(相对定位、绝对定位、固定定位,但不能是静态定位)则它会以最近一级有定位元素作为参照元素移动位置。...注意最近一级 ,有定位 这两个条件,缺一不可,如果第一个父元素没有定位,则会找第二个父元素(前提是第二个父元素有定位,如果没有定位再往上一级找)作为参照位置。...特点: 固定定位跟父元素没有任何关系。 固定定位元素不会随着滚动条滚动而滚动。 固定定位后,该元素不会占用原先位置,脱离标准流。...特点: 粘性定位以浏览器可视窗口为参照点移动元素粘性定位元素会占有原先位置。 使用粘性定位时必须添加top、left、right、bottom 其中一个属性粘性定位才会生效。...绝对定位(固定定位)会完全压住盒子: 浮动元素不同,只会压住它下面标准流盒子,但是不会压住下面标准流盒子里面的文字(图片),但是绝对定位(固定定位)会压住下面标准流所有的内容。

1.4K30

CSS粘性定位是怎样工作

当我在包装元素中添加更多元素时,它就能开始正常工作了。 这是为什么? 这是因为当一个元素被赋予 position: sticky 样式时,粘性项目的容器是它可以粘贴唯一区域。...粘性元素没有任何要浮动元素,因为它只能浮动在同级元素上,作为唯一元素,它不能浮动。...容器是粘性元素范围,并且该元素无法离开其所在粘性容器。 这就是为什么在前面的例子中,粘性元素没有被粘住原因:这个粘性元素粘性容器中唯一元素。 CSS 粘性定位示意图: ?...粘性元素粘性容器 查看在CodePen上例子: https://codepen.io/elad2412/pen/QYLEdK 理解 CSS 粘性行为 正如我前面说过那样,CSS 粘性定位行为与所有其他...固定 —— 当元素被粘住时,它行为与 position: fixed 完全相同,浮动在与视口相同位置,并从流中移除。

1.8K10

CSS粘性定位 - 它真正工作原理!

当它正常工作时,元素会"粘"在一定位置,但在滚动其他部分,它又会停止"粘"住。作为一个每天都在使用CSS的人,作者无法接受自己不能深入理解这个问题根本原因,所以决定深入研究sticky定位。...为什么? 这样做原因是,当一个元素被赋予sticky定位样式时,粘性元素容器是粘性元素可以粘住唯一区域。...这个元素没有其他元素可以浮动,因为它只能浮动在兄弟元素上,而作为唯一元素,它没有兄弟元素。 CSS Sticky 定位真正工作原理!...这就是前面例子中,粘性元素一开始就没有粘住原因:粘性元素粘性容器中唯一元素。...Fixed - 当项目固定时,它行为与 position: fixed 完全相同,浮动在视口相同位置,从流中移除。

26520

CSS笔记(14)

CSS定位 为什么需要定位? 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子....绝父相: 级使用绝对定位,父级使用相对定位 级绝对定位,不会占有位置,可以放到父盒子里面的任意地方,不会影响其他兄弟盒子.相当于浮动起来了,脱离了标准流,不占用原来位置....当然,绝父相不是永远不变,如果父元素不需要占有位置,绝父绝也会遇到. 4.固定定位 固定定位是元素固定于浏览器可视区位置.主要使用场景:可以在浏览器页面滚动元素元素位置不会改变....做出来就是类似的效果. 5.粘性定位(了解) 粘性定位可以被看做是相对定位和固定定位混合 语法: 选择器 { position : sticky ; } 以浏览器可视窗口为参照点移动像素(固定定位特点...浮动元素不同,只会压住它下面标准流盒子,但是不会压住下面标准流盒子里面的文字(图片),因为浮动产生初衷就是做出文字围绕效果.但是绝对定位(固定定位)会压住下面标准流所有的内容.

58110

CSS定位特性

绝父相 父元素加相对定位,元素加绝对定位 父盒子不加定位的话,元素定位将由浏览器页面为准 固定定位 固定在浏览器可视区域,与父元素无关 position:fixed; 固定到版心 贴版心右侧...:先left:50%;,再让固定定位盒子margin-left:版心宽度一半; 粘性定位 滑到某个位置时,盒子固定 position:sticky; top:10px; 特点: 以浏览器可视窗口为参照点移动元素...粘性定位占有原先位置 必须加一个边偏移才能有效 定位叠放次序 通过z-index值来确定哪个靠上面 数值越大,盒子越靠上,可正可负 {z-index:2;} 绝对定位盒子居中 加了绝对定位盒子不能通过...margin来居中 水平 先走父元素宽度一半 在往左走定位盒子宽度一半 垂直 高度一半 往下走盒子高度一半 扩展 特性 行内元素加绝对或者固定定位,可直接设置高度和宽度 块级元素加绝对或固定定位...,如果不给宽高,默认大小是内容大小 浮动元素不会压住标准流文字,绝对定位会压住所有内容

57840

什么是BFC

top等属性成固定位置效果。...可以知道sticky属性有以下几个特点: 该元素并不脱离文档流,仍然保留元素原本在文档流中位置。 当元素在容器中被滚动超过指定偏移值时,元素在容器内固定在指定位置。...亦即如果你设置了top:50px,那么在sticky元素到达距离相对定位元素顶部50px位置时固定,不再向上移动。...具有BFC特性元素可以理解为一个完整盒子,这个盒子不会产生塌陷,无论内部元素如何变化,其外部元素不受影响 如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性: body 根元素 浮动元素...左浮动元素会盖住未浮动元素一部分区域,但是文字不会被覆盖,形成了文字环绕效果,如果不想这样,我们可以采用BFC方式,和上面的例子相同,添加一个overflow:hidden来触发BFC即可 <div

84520

CSS进阶内容—浮动和定位详解

,遇到父元素边缘换行 接下来让我们走进浮动和定位世界 浮动 首先我们为什么需要浮动呢?...:relative;} 它是相对于自己原本位置进行移动 它在移动之后,在标准流中仍旧占有原本位置(即移动之后,原本位置仍旧保留,其他标准流无法占用该位置) 它在移动之后,在其他位置时,属于覆盖其他盒子之上...(sticky) 粘性定位可以认为使相对定位和固定定位混合 语法: 选择器{position:sticky;} 以浏览器可视窗口为参照点移动元素固定定位特点) 粘性定位占有原先位置(相对定位特点...绝父相: 父级为了限制级,必须采用相对定位 自己为了放置于任意位置且不干扰其他盒子,必须采用绝对定位 我们给出一个案例来解释绝父相: <!...(用来完成图文环绕) 绝对固定元素会将盒子和文字一并压住(用来完全覆盖) 结束语 好,那么关于浮动和定位知识点基本汇总完毕,希望能给你带来收获。

2.2K10

CSS3之positionsticky使用

一、简介css3中position有个属性值sticky,即粘型定位,初级面试中会经常问到,大多数面试者往往会忽略这个属性值,其可以理解为相对定位(relative)和固定定位(fixed)结合。...设置了position:sticky元素并不会脱离文档流元素在区域内,元素不受定位影响(top、left等设置无效)元素所在窗口发生滚动,元素就要移出区域时,定位又会变成fixed,根据设置left...另一种场景是在一个盒子中高度固定,窗口有滚动情况下,实现某元素一直保持在窗口某个位置三、注意事项父元素高度必须大于sticky元素高度不设置父元素高度时候,父元素不能使用除了overflowvisiable...属性,比如auto、scroll设置父元素高度,元素高度超过父元素高度,父元素使用auto、scroll等属性,此时且出现了滚动,sticky依然是有效设置父元素高度,元素高度没有超过父元素高度,此时没有出现滚动...粘性定位!

25210

Position定位

脱离文档流,也就是将元素从普通布局排版中拿走,其他盒子在定位时候,会当做脱离文档流元素不存在而进行定位。...,其不脱离文档流,对于top、bottom、left、right、z-index属性设置有效,设置偏移属性后会移动相对定位元素,但它原本所占空间不会改变,相对定位元素经常被用来作为绝对定位元素容器块...,如果元素没有已定位元素,那么它位置相对于,通常使用方案是在外层嵌套一层relative相对定位元素作为元素,再设置绝对定位元素偏移将会相对于外层relative元素进行偏移,...,元素位置相对于浏览器窗口是固定位置,即使是窗口滚动元素也不会移动,注意在中元素使用fixed是相对于进行定位,类似于在页面中创建了一个新浏览器窗口...,元素位置是基于用户滚动位置来定位,粘性定位元素是依赖于用户滚动,在position: relative与position: fixed定位之间切换,在页面显示时sticky表现类似于position

99920

Web 前端 | 面试题 | 笔记

固定定位 fixed: 元素位置相对于浏览器窗口是固定位置,即使窗口是滚动它也不会移动。Fixed 定 位使元素位置与文档流无关,因此不占据空间。 Fixed 定位元素其他元素重叠。...absolute 定位元素其他元素重叠。...BFC是CSS布局一个概念,是一个独立渲染区域,规定了内部box如何布局, 并且这个区域元素不会影响到外面的元素,其中比较重要布局规则有内部 box 垂直放置,计算 BFC 高度时候,浮动元素也参与计算...box重叠 BFC是一个独立容器,容器里面的元素不会影响到外面的元素 计算BFC高度时,浮动元素也参与计算高度 元素类型和display属性,决定了这个Box类型。...值不为visible BFC使用场景 去除边距重叠现象 清除浮动(让父元素高度包含浮动元素) 避免某元素被浮动元素覆盖 避免多列布局由于宽度计算四舍五入而自动换行 3.

74040

CSS3之position:sticky使用

一、简介css3中position有个属性值sticky,即粘型定位,初级面试中会经常问到,大多数面试者往往会忽略这个属性值,其可以理解为相对定位(relative)和固定定位(fixed)结合。...二、使用场景比如导航或者Tab当我们下拉时候,则会被隐藏,但是我们要实现随着下拉导航或Tab保持在浏览器窗口顶端。...三、注意事项父元素高度必须大于sticky元素高度不设置父元素高度时候,父元素不能使用除了overflowvisiable属性,比如auto、scroll设置父元素高度,元素高度超过父元素高度,...父元素使用auto、scroll等属性,此时且出现了滚动,sticky依然是有效设置父元素高度,元素高度没有超过父元素高度,此时没有出现滚动,sticky仅在父元素高度内有效sticky元素需要设置top...粘性定位!

41800

前端学习笔记—CSS

解决方法见文章下方浮动解析,如设置父元素清除浮动 设置float浮动后元素不会出现内部元素上下margin合并问题,也可以清除第一个元素上边距和最后一个元素下边距被父元素剥夺问题 内容溢出问题...定位模块式:相对定位(relative),绝对定位( absolute),固定定位(fixed),粘性定位(sticky),默认定位模式static。...粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 元素。 注:所有的定位都是同一层级。建议大模块用浮动,微调用定位。...:stretch;属性是单行元素默认值,在不设置固定高度时候,侧轴方向高度自动充满父容器。...元素设置固定高度时,与flex-start效果一样。 align-content:stretch;属性是多行元素默认值,在不设置固定高度时候,侧轴方向高度自动平分父容器。

11210

CSS基础学习(3)

,属性都无效 Position除了static属性外,,还有 relative (相对定位) absoulute (绝对定位) fixed (固定定位) sticky (粘性定位) 1-2 Position-relative...,并不为元素预留空间,通过指定元素相对于最近非 static 定位祖先元素偏移,来确定元素位置。...绝对定位元素可以设置外边距(margins),且不会与其他边距合并 关键词 : 最近 和 非static定位 和 祖先元素 步骤 首先获取第一张照片元素 发现是absolute布局 找寻父节点...left: 30px; top: 50px; color: yellowgreen; } .img-box { position: relative; } 但有时固定文字或图片会被其它元素覆盖...1.内部是行内元素,可以在父容器使用 text-align: center; 2.内部是块状元素,可以在容器上使用 margin: 0 auto;(如果不是块状元素,需要设置 display: block

65330

从头学前端-CSS基础04

定位为什么需要定位> 定位可以让盒子在指定盒子内自由移动位置,并压住其他盒子,而浮动只能让盒子排在一行;定位组成>定位是定位模式+边偏移> 定位模式用于指定一个元素在文档中定位方式,使用CSS属性...(不脱标)- 绝对定位absolute> 绝对定位是元素在移动位置时候,是相对于它祖先元素移动; > 如果没有祖先元素或祖先元素没有定位,则以浏览器为准对齐 > 如果祖先元素有定位,则以最近一级有定位祖先元素为准移动位置...; > 觉得定位不占用原来标准流位置,即脱标- **绝父相**:>元素是绝对定位, 父元素则需要是相对定位,因为相对定位会保留位置,而绝对定位不保留位置;- 固定定位fixed> 以浏览器可视窗口为准移动元素...> 与父元素没有任何关系> 不随着滚动条滚动而滚动> 不占用标准流位置,是一种特殊绝对定位- 粘性定位 sticky > 粘性定位可以被认为是相对定位和固定定位混合> 已可视窗口为参考点> 占有标准流位置...,可以让多个盒子前后叠压显示;部分开发规范CSS属性书写顺序布局定位:display 等自身属性:width,height 等文本属性:color font text- 等其他属性:css3属性等图片布局整体思路确定页面的版心

62240

css精髓:这些布局你都学废了吗?

单列布局 单列布局是最常用一种布局,一般是将一个元素作为容器,设置一个固定宽度,水平居中对齐。...1 2列布局 2列布局使用频率也非常高,其实现效果主要就是将页面分割成左右宽度不等两列。一般宽度较小一列会设置为固定宽度,作为侧边栏之类,而另一列则充满剩余宽度,作为内容区。...,都是通过设置负margin来实现元素排布,不同就是html结构,双飞翼是在center元素内部又设置了一层inner-center元素并设置它左右margin,而非圣杯布局padding,来排除两边元素覆盖...粘性布局(sticky) 粘性布局是什么呢?我们先来看看效果演示 没错,其实就是在页面滚动时候保持元素(这里是标题)在页面视图上方,也就是我们常常看到 吸附效果。 标题行设置了背景色。...sticky定位元素会遮住滚动而来“正常”文档流;后面的sticky元素覆盖前面的sticky元素,就好像一层层便利贴,是不是很酷~~。

1K30

前端面试01-HTML+CSS

只要当前选择符左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配元素,或者因为不匹配而退出。...因此,"left:20" 会向元素 LEFT 位置添加 20 像素。 sticky 粘性定位(而sticky相当于加了一个滚动事件处理,当页面滚动到相对应元素上,就会变成固定定位效果。...当滚动到父元素不在可视区域范围内时,定位效果就会消失。) static 默认值。没有定位,元素出现在正常流中 10.display:inline-block 什么时候不会显示间隙?...将元素放置在同一行 为父元素中设置font-size: 0,在元素上重置正确font-size 为inline-block元素添加样式float:left 设置元素margin值为负数 11.你对...) 利用BFC解决包含塌陷 清除浮动产生影响 BFC可以阻止标准流元素被浮动元素覆盖

66920
领券