所以如果我正确理解z-index,它在这种情况下是完美的:

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

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

or

z-index:100 // on the div above

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


当前回答

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

其他回答

z指数需要这些来工作:

位置:相对,绝对,固定,.. 确保父元素没有溢出:hidden;

在很多情况下,一个元素必须被定位到z-index才能工作。

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

实际上,position: fixed, position: absolute和position: sticky也会启用z-index,但这些值也会改变布局。与位置:相对布局不会被打乱。

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


许多关于“为什么z-index不起作用?”的问题的答案都断言,z-index只对已定位的元素起作用。从CSS3开始,这种情况就不再存在了。

弹性项目或网格项目的元素即使在位置是静态的情况下也可以使用z-index。

从规格来看:

4.3. Flex Item Z-Ordering Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static. 5.4. Z-axis Ordering: the z-index property The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.

以下是z-index在非定位伸缩项目上的演示:https://jsfiddle.net/m0wddwxs/

你的元素需要有一个position属性。(例如绝对指数、相对指数、固定指数)或z指数都不起作用。

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

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