为什么z指数不起作用?

因此，如果我正确理解z-index，在这种情况下它将是完美的:

enter image description here

我想把底部图像(标签/卡片)下面的div上面。所以你看不到锋利的边缘。我怎么做呢?

z-index:-1 // on the image tag/card

或

z-index:100 // on the div above

也不管用。像这样的组合也不行。如何来吗?

445525 次浏览
小开
最佳答案

z-index属性只适用于除static之外的具有position值的元素(例如position: absolute;、position: relative;或position: fixed)。

还有在Firefox中支持的position: sticky;，在Safari中是前缀，在旧版本的Chrome中使用了一段时间的自定义标记，并且微软正在考虑将其添加到Edge浏览器中。

小开

你的元素需要有一个position属性。(例如absolute, relative fixed)或z-index行不通。

小开

在许多情况下，一个元素必须定位为z-index才能工作。

实际上，将position: relative应用于问题中的元素可能会解决问题(但没有提供足够的代码来确定)。

实际上，position: fixed， position: absolute和position: sticky也将启用z-index，但这些值也会改变布局。使用position: relative，布局不会被打乱。

本质上，只要元素不是position: static(默认设置)，它就被认为是定位的，并且z-index可以工作。

“为什么z指数不起作用?”问题的许多答案断言z-index 只有工作在定位的元素上。从CSS3开始，这种情况就不再存在了。

即使position为static， flex项目<强> < em > < / em > < / >强或<强> < em >电网项目< / em > < / >强的元素也可以使用z-index。

从规格来看:

4.3。Flex Item z - ordered

Flex项目绘制与内联块完全相同，除了使用顺序修改的文档顺序来代替原始文档 即使position是static， z-index的值也会创建一个堆叠上下文

5.4。z轴排序:z-index属性

网格项的绘制顺序与内联块完全相同，除了order-modified document order为 用于代替原始文档顺序，并且z-index值而不是auto创建一个堆叠上下文，即使 position是static。< / p >

下面是z-index在非定位伸缩项上工作的演示

小开

如果你将position设置为static以外的值，但你的元素的z-index似乎仍然不起作用，这可能是某个父元素设置了z-index。

堆叠上下文具有层次结构，每个堆叠上下文都按照父堆栈上下文的堆叠顺序考虑。

下面是html

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
<div id="el3" style="z-index: 8"></div>
</div>

不管el3的z-index将被设置多大，它将始终位于el1之下，因为它的父类具有更低的堆叠上下文。你可以把堆叠顺序想象成级别，其中el3的堆叠顺序实际上是3.8，它低于5。

如果你想检查父元素的堆叠上下文，你可以使用这个:

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
var styles = window.getComputedStyle(el);
console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

有一篇关于MDN上叠加上下文的很棒的文章

小开

确保你想要用z-index控制的元素没有带有z-index属性的父节点，因为元素由于其父元素的z-index级别而在较低的堆叠背景中。

这里有一个例子:

<section class="content">
<div class="modal"></div>
</section>


<div class="side-tab"></div>


// CSS //
.content {
position: relative;
z-index: 1;
}


.modal {
position: fixed;
z-index: 100;
}


.side-tab {
position: fixed;
z-index: 5;
}

在上面的例子中，模式的z指数比内容高，尽管内容会出现在模式的顶部，因为"内容"是具有z-index属性的父类。

这里有一篇文章解释了z-index可能不起作用的4个原因: https://coder-coder.com/z-index-isnt-working/ < / p >
小开

在我的例子中，我有我的导航栏的不透明度为0.9，我从codercoder.com得到了我的答案，因为我从我的导航栏的css中删除了不透明度属性，z-index工作

小开

z指数需要这些来发挥作用:

  1. 位置:相对，绝对，固定，..
  2. 确保父元素没有overflow: hidden;
小开
我在z-index上也有同样的问题 不管你信不信，只要设置背景颜色

就可以了

像这样

背景颜色:白色;

小开

如果所有这些都失败了，请在HTML中查找语法错误。这不是直观的，但我已经看到它是为什么z-index不工作的原因。

下面的代码有无效的HTML语法:

<div class="over"/>
<div class="under"/>

.．.(这是无效的语法，因为div不是一个自关闭标签)。

应用于这些流氓HTML元素的CSS属性，如background-color: black、position: fixed、width: 150px和top:150px，都能正常工作。然而，z-index: 2属性在完全相同的条件下并没有工作。

只有当无效的HTML被修复时，z-index才能正确工作。

我不确定为什么z-index比其他CSS属性更挑剔，但也许这个答案可以帮助到一些人。

小开

只要给出其他静态的位置。你应该给两个容器一个位置，这样就可以了。


提交答案