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

具有相对位置和粘性的Z-index不起作用

是因为相对定位(position: relative)和粘性定位(position: sticky)的元素在层叠上下文中的位置受限制,无法通过Z-index属性来改变其层叠顺序。

相对定位(position: relative)是相对于元素自身原来的位置进行定位,它不会改变元素在文档流中的位置,但可以通过top、right、bottom、left属性来调整元素的位置。相对定位的元素在层叠上下文中的层叠顺序与其在文档流中的顺序一致。

粘性定位(position: sticky)是一种特殊的相对定位,它会根据元素在视口中的位置来切换定位方式。当元素滚动到指定位置时,会固定在该位置,直到滚动到另一个指定位置。粘性定位的元素在层叠上下文中的层叠顺序也与其在文档流中的顺序一致。

由于相对定位和粘性定位的元素在层叠上下文中的层叠顺序与文档流中的顺序一致,无法通过Z-index属性来改变它们的层叠顺序。如果需要改变元素的层叠顺序,可以考虑使用绝对定位(position: absolute)或固定定位(position: fixed)。

绝对定位(position: absolute)是相对于最近的已定位祖先元素(非static定位)或根元素进行定位,可以通过Z-index属性来改变元素的层叠顺序。固定定位(position: fixed)是相对于视口进行定位,也可以通过Z-index属性来改变元素的层叠顺序。

总结起来,具有相对位置和粘性的Z-index不起作用是因为相对定位和粘性定位的元素在层叠上下文中的层叠顺序与其在文档流中的顺序一致,无法通过Z-index属性来改变。如果需要改变元素的层叠顺序,可以考虑使用绝对定位或固定定位。

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

相关·内容

CSS中定位详解

CSS中定位详解及扩展 定位分类 静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 粘性定位(sticky) 定位叠放次序(z-index...二、相对定位(relative) 语法: 选择器 { position: relative; } 含义:采用相对定位后元素位置以它初始位置(原来位置)作为参照物进行定位。...五、粘性定位(sticky) 语法: 选择器 { position: sticky; top: 5px; } 含义:粘性定位可以被认为是相对定位固定定位混合。...特点: 粘性定位以浏览器可视窗口为参照点移动元素。 粘性定位元素会占有原先位置。 使用粘性定位时必须添加top、left、right、bottom 其中一个属性粘性定位才会生效。...粘性定位兼容性差。 应用场景:顶部通栏固定。 六、定位叠放次序(z-index) 语法: 选择器 { z-index: 1; } 在使用定位进行布局时候,可能会出现盒子重叠情况。

1.4K30
  • 对定位深入理解与应用

    相对定位 如何设置相对定位 元素设置 position:relative ,实现相对定位 调整: left 、 right 、 top 、 bottom 参考点 相对于自己原来位置进行定位...都发生定位两个元素,后写元素会盖在先写元素之上 left 不能 right 一起设置, top bottom 不能一起设置 相对定位元素,也能继续浮动,但不推荐这样做 相对行为元素,也能通过...粘性定位通常用于创建吸顶效果或侧边栏固定效果,当用户滚动页面时,元素会始终保持在视口内特定位置。...滚动属性(特别是 overflow: auto;)可以在元素内容超出容器时提供滚动条,使用户能够滚动查看全部内容,与粘性定位结合使用时,可以在固定位置时仍然允许内容查看操作。...如果 z-index 值大元素,依然没有覆盖掉 z-index 值小元素,那么请检查其包含块层级。

    9510

    纯CSS实现吸附效果

    前言 「吸附效果」就是网页滚到到某个位置,元素固定在该位置,后续不随网页滚动而滚动。吸附效果很常见,譬如吸顶效果吸底效果,经常用在跟随导航、移动广告悬浮提示等场景中。...它们都有着共通实现原理:监听scroll事件,判断scrollTop目标元素位置范围,符合条件则将目标元素position声明为fixed,令目标元素相对于浏览器窗口进行定位,让用户看上去就像钉在浏览器指定位置上...「粘性定位」是相对定位固定定位合体,元素在特定阈值跨越前为相对定位,跨越后为固定定位。 主要是为了推广知识点,直接上代码,样式就不细磨了,将就看吧。...可点击「阅读原文」查看本文源码与效果。 注意 粘性定位参照物并不一定是position:fixed。...当离目标元素最近祖先元素声明了position:relative|absolute|fixed|sticky,目标元素就相对该祖先元素进行粘性定位。

    3.9K20

    CSS定位

    相对定位是相对自己标准流位置进行定位移动 position:relative; 特性: 1....移动出发点是自身标准流位置 2. 相对定位移动元素不会对别的元素产生干扰,“没有脱标”,真正占得位置还是标准流位置(肉体不在 灵魂永驻) 3. 可以盖在标准流上方 4....一般用于微调元素配合绝对定位来实现效果 绝对定位 position:absolute; 特性: 1.移动出发点: 从绝对元素开始一直往上级找(直到找到最大html标签),在这个过程中,...移动位置基准 静态static 不脱标正常模式 不可以 正常模式 相对定位relative 不脱标占有位置 可以 相对自身位置移动 绝对定位absolute 完全脱标,不占有位置 可以 相对于定位父级移动位置...固定定位fixed 完全脱标,不占有位置 可以 相对于浏览器移动位置 z-index 控制“定位”元素叠放层级 z-index只针对定位元素有效果 z-index值越大,层级越高 如果父元素已经比较过层级了

    1K40

    DOM元素定位

    (粘性定位) 相对定位 relative 相对定位即可控制DOM相对于自己原来位置进行定位 可通过如 left: 50px 如此来调节 绝对位置 absolute absolute特性是不会为此元素预留空间...,即原本DOM元素下方元素会向上占住原本DOM元素位置,类似于网页新开了一个图层效果。...absolute定位是以相对于元素最近非static定位祖先元素偏移来确定元素位置。...可以利用如 right:50px 等来调节位置 粘性定位 sticky 这个简单说就是当页面下拉到DOM元素到达了设定位置,DOM元素将不会再随下拉移动,效果如页面内图片 顺便一提,如前面所说,网页存在类似图层一说...,具体图层上下关系往往通过 z-index 来表示 z-index 越大元素越在上层

    98230

    CSS粘性定位是怎样工作

    static relative 会保留它们在文档流中自然空间,而 absolute fixed 则不会 —— 它们空间被移除而且具有浮动行为。...在第一个例子中,大家很容易就能看明白 当视口到达定义位置时,元素会被粘住。 例: ? 但问题是,它有时候能用,而有时却不起作用。 当它工作时,元素会粘住,但在滚动到其他部分,它会停止粘贴。...粘性容器 —— 是包装粘性元素 HTML 元素。 这是粘性元素可以浮动最大区域。 当你定义一个具有 position:sticky 样式元素时,父元素会被自动定义为粘性容器!...我来解释一下: 相对(或静态)—— 粘性定位元素类似于相对和静态位置,因为它保留了 DOM 中自然间隙(留在流中)。...这意味着你可以把页脚定义为粘性,并且在向下滚动时使它看起来总是被粘在底部。 当到达粘性容器末端时,元素会停在它自然位置。 最好是在以粘性容器底部为自然位置元素上使用它。

    1.8K10

    Position定位

    ,元素位置相对其原本位置进行偏移,其不脱离文档流,对于top、bottom、left、right、z-index属性设置有效,设置偏移属性后会移动相对定位元素,但它原本所占空间不会改变,相对定位元素经常被用来作为绝对定位元素容器块...,如果元素没有已定位父元素,那么它位置相对于,通常使用方案是在外层嵌套一层relative相对定位元素作为父元素,再设置绝对定位元素偏移将会相对于外层relative元素进行偏移,...relative; } .t4{ position: absolute; top: 100px; } fixed fixed是固定定位,元素位置相对于浏览器窗口是固定位置...,元素位置是基于用户滚动位置来定位,粘性定位元素是依赖于用户滚动,在position: relative与position: fixed定位之间切换,在页面显示时sticky表现类似于position...、right、bottom、left其中之一,必须通过指定top、right、bottom、left四个阈值其中之一,才可使粘性定位生效,否则其行为与相对定位相同。

    1K20

    CSS 面试要点:定位(Positioning)

    这意味着,可以创建不干扰页面上其他元素位置隔离 UI 功能,如弹出信息框控制菜单,翻转面板,可以在页面上任何地方拖放 UI 功能等。...同时,元素位置发生变化,top,bottom,left right 以不同方式在绝对定位,它们指定元素应距离每个包含元素距离,而不是指定元素应该移入分析。...可以改变定位上下文 —— 绝对定位元素相对位置元素。...默认情况下,定位元素都具有 z-index 属性为 auto 实际值为 0。...https://codepen.io/cellinlab/pen/dydgwGp # 粘性定位 position: sticky,基本上是相对位置固定位置混合体,它允许被定位元素表现得像相对定位一样

    59710

    【戴嘉乐 IPFS】基于IPFSGeoHash构建具有地理位置价值服务DDApp(理论篇)

    它是一种内容可寻址对等超媒体分发协议可以让网络更快、更安全、更开放。它是一个面向全球、是一个点对点分布式版本文件系统,试图将所有具有相同文件系统计算设备连接在一起。...在IPFS节点网络性能目前并不乐观情况下,尝试去寻找能实现具有商业级别能力IPFS应用过渡方案。...数据: [kdo55fe9ht.png] PS: 关于Demo这块,后续会另外新开一篇实战文章【应用】基于IPFSGeoHash构建具有地理位置价值服务DDApp(实战篇)来做专门介绍,让大家也能自己动手编写一个功能相对完善...物联网结合: 充电桩,ETC这些具有支付属性、位置属性智能设备创新等等。...IPFS-Geo 意义:是一个具有地理位置特征IPFS智能对象,其元数据具备Geo相关特性,支持千万级别空间数据快速索引,对象内还提供LBS相关功能接口服务。

    70910

    CSS定位特性

    ,定位元素相对于其父元素右边线距离 相对定位 是元素在移动位置时候,相对于原来位置来说 选择器{position:relative;} 绝对定位 在移动时候,相对于它祖先元素来说 选择器...{position:absolute;} 三个特点: 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位 如果祖先元素有定位,则以最近一级有定位祖先元素为参考点移动位置 绝对定位不占有原先位置...:先left:50%;,再让固定定位盒子margin-left:版心宽度一半; 粘性定位 滑到某个位置时,盒子固定 position:sticky; top:10px; 特点: 以浏览器可视窗口为参照点移动元素...粘性定位占有原先位置 必须加一个边偏移才能有效 定位叠放次序 通过z-index值来确定哪个靠上面 数值越大,盒子越靠上,可正可负 {z-index:2;} 绝对定位盒子居中 加了绝对定位盒子不能通过...margin来居中 水平 先走父元素宽度一半 在往左走定位盒子宽度一半 垂直 高度一半 往下走盒子高度一半 扩展 特性 行内元素加绝对或者固定定位,可直接设置高度宽度 块级元素加绝对或固定定位

    58640

    浪费了8个小时摸鱼时间解决z-index不生效问题

    z-index不起作用时,可能是由于以下几个原因:没有指定元素定位属性:z-index属性只对定位元素(position属性值为relative、absolute或fixed)起作用。...元素z-index值不正确:如果多个元素都具有定位属性且属于同一层叠上下文,那么z-index值较大元素将覆盖z-index值较小元素。因此,需要确保所需元素z-index值较大。...总结起来,要使z-index生效,需要确保元素具有正确定位属性(relative、absolute或fixed),在正确层叠上下文中,并且具有较大z-index值。...MDN官方:假定用户正面向(浏览器)视窗或网页, HTML 元素沿着其相对于用户一条虚构 z 轴排开,层叠上下文就是对这些 HTML 元素一个三维构想。...这意味着如果一个层叠上下文位于一个最低位置层,那么其子元素z-index设置得再大,它都不会出现在其他层叠上下文元素上面。

    16600

    从头学前端-CSS基础04

    使用- 静态定位static> 是元素默认定位方式,按照标准流特性摆放位置,没有偏移- 相对定位relative>元素在移动时会以自己原来位置移动; 原来在标准流中位置还保留,后面的盒子以标准流对待它...(不脱标)- 绝对定位absolute> 绝对定位是元素在移动位置时候,是相对于它祖先元素移动; > 如果没有祖先元素或祖先元素没有定位,则以浏览器为准对齐 > 如果祖先元素有定位,则以最近一级有定位祖先元素为准移动位置...; > 觉得定位不占用原来标准流位置,即脱标- **子绝父相**:>子元素是绝对定位, 父元素则需要是相对定位,因为相对定位会保留位置,而绝对定位不保留位置;- 固定定位fixed> 以浏览器可视窗口为准移动元素...> 与父元素没有任何关系> 不随着滚动条滚动而滚动> 不占用标准流位置,是一种特殊绝对定位- 粘性定位 sticky > 粘性定位可以被认为是相对定位固定定位混合> 已可视窗口为参考点> 占有标准流位置...auto,属性为数字,可以有负值,但没有单位>当都没有z-index属性,按照属性叠放,后来居上- 绝对定位盒子居中: > lefttop 设置 父元素宽度50% > margin-leftmargin-top

    62940

    CSS笔记(14)

    静态定位在布局时很少用到. 2.相对定位 相对定位是元素在移动位置时候,是相对于它原来位置来说....做出来就是类似的效果. 5.粘性定位(了解) 粘性定位可以被看做是相对定位固定定位混合 语法: 选择器 { position : sticky ; } 以浏览器可视窗口为参照点移动像素(固定定位特点...) 粘性定位占有原先位置(相对定位特点) 必须添加top/left/right/bottom其中一个才有效....定位总结: 定位叠放次序: z-index 在使用定位布局时,可能会出现盒子重叠情况.此时,可以使用z-index来控制盒子前后次序....数字后面不能加单位 只有定位盒子才有z-index属性. 绝对定位盒子居中 想要实现绝对定位盒子居中,想要用原来margin:auto是会失效(相对定位是可以!!!)

    59310

    CSS基础学习(3)

    ,属性都无效 Position除了static属性外,,还有 relative (相对定位) absoulute (绝对定位) fixed (固定定位) sticky (粘性定位) 1-2 Position-relative...(相对定位) 使用relative(相对定位) 来实现 relative在默认文档流布局下,进行偏移 .first { position: relative; left: 50px;...,并不为元素预留空间,通过指定元素相对于最近非 static 定位祖先元素偏移,来确定元素位置。...大小代码先后顺序导致 1、默认非static元素z-index都为0 2、z-index越大,则越在最上面,离观察者越近 3、同样z-index,在HTML元素越靠后,则越在最上面 1-5 sticky...(粘性定位) 当页面滑动到相应位置时,该段文字或图片,会随着页面滑动而滑动 h1 { position: sticky; color: yellowgreen; top: 50px

    65930

    【前端】CSS : position

    没有定位,元素出现在正常流中 relative : 相对定位 fixed : 固定定位 absolute : 绝对定位 sticky : 粘性定位 用法 static 正常布局行为,即元素在文档常规流中当前布局位置...此时top, right, bottom, left z-index 属性无效。...static relative 相对定位 元素先放置在未添加定位时位置,再在不改变页面布局前提下调整元素位置。...relative fixed 固定定位 不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)位置来指定元素位置。元素位置在屏幕滚动时不会改变。...absolute.gif sticky 粘性定位 元素先按照普通文档流定位,然后相对于该元素在流中 flow root(BFC) containing block(最近块级祖先元素)定位。

    1K10

    【CSS3】css开篇基础(4)

    浮动元素会脱离标准流(脱标) 浮动元素会一行内显示并且元素顶部对齐 浮动元素会具有行内块元素特性 浮动元素会脱离标准流(脱标) 脱离标准普通流控制(浮) 移动到指定位置(动),(俗称脱标) 浮动盒子不再保留原先位置...常用定位属性包括: 相对定位 相对于元素自身正常位置进行定位,通过top、right、bottom、left属性来调整位置,不会脱离文档流。...子绝父相 —— 虽然父元素定位可以是相对、绝对或者固定定位,但是绝对定位固定定位都会脱离标准流,所以我们实际开发中,一般都使用相对定位,这就是常说子绝父相。...如果元素离开视口顶部时没有足够空间放置它,它将像相对定位一样继续滚动,直到可以固定在指定位置粘性定位不脱标,原有空间一直不变。...只有设置了定位元素才能通过 z-index 控制其堆叠顺序,因为只有这些元素才能脱离正常文档流并具有层叠上下文。

    6310

    「1 分钟学 DOM 基础操作」添加移除元素样式、添加至元素内、添加移除事件、计算鼠标相对元素位置

    大家好,今天我们来花 1 分钟来学习 DOM 相关基础操作,内容虽然简单,但是还是有必要归纳总结,希望这些整理对大家有所帮助。...ele.classList.toggle('class-name'); 二、将元素添加至指定DOM元素内末尾 将 ele 元素添加至 target 元素内末尾 target.appendChild...(ele); 三、添加移除事件 1、使用 ON 属性添加事件(不推荐) 你可以在 dom 元素使用 on{eventName} 属性,eventName 代表事件名,代码如下: ele.onclick...四、计算鼠标在元素内相对位置 要计算鼠标点击事件,鼠标在元素内相对位置,我们需要用到 getBoundingClientRect() 这个关键方法,示例代码如下: ele.addEventListener...1分钟学会 2 个复制文本到剪贴板方法 1分钟学会如何用 JS 计算文本宽度 1分钟学会个通用妙招,让你知道用户看了啥 1分钟用 CSS + HTML 实现个按字母吸附滑动列表(类似手机通讯录列表

    1.7K30

    全栈第一步-CSS基础前言CSS基础总结

    比如我们可以给一个link(a元素)inline-block属性值,使其既具有block宽度高度特性又具有inline同行特性。...2、relative:生成相对定位元素,通过top,bottom,left,right设置相对于其正常位置进行定位。可通过z-index进行层次分级。...3、absolute:生成绝对定位元素,相对于static定位以外第一个父元素进行定位。元素位置通过"left","top","right"以及"bottom"属性进行规定。...可通过z-index进行层次分级。 4、fixed:生成绝对定位元素,相对于浏览器窗口进行定位。元素位置通过"left","top","right"以及"bottom"属性进行规定。...下面对应用较多relativeabsolute进行分析 比较重要一点是: relative是相对于自身位置进行定位, absolute是相对于static定位以外第一个父元素进行定位,包括

    52220
    领券