Question

我知道z-index只适用于定位元素，但我想知道为什么会这样。这种行为是否有任何正当理由，或者它只是那些半任意规范决策之一？

我在使用这样的代码时遇到了这个问题：

HTML

<div>
    <img class="not-positioned" src="http://placekitten.com/g/200/300">
    <img class="positioned" src ="http://placekitten.com/g/400/500">
</div>

CSS

img {
    border: 2px solid black;
}

.positioned {
    position: relative;
    left: -60px;
    z-index: 1;
}

.not-positioned {
    z-index: 99;
}

http://jsfiddle.net/666nzL6j/

您会注意到这是根据规范运行的（.not-positioned图片位于.positioned图片后面，尽管.not-positioned的z-index值更高），但我有一个很难理解这种行为的基本原理。

感谢。

Answer 1

元素位于所有3个维度

left

right

使用top和bottom
使用z-index

当然z-index与其他人不是100％相似，因为它只描述了堆叠而不是真实的＃34;位置，但是你可以在z轴上做所有的事情，因为你在那个轴上没有固定的边界。

因此，如果要设置其position，则需要为static以外的z-index值提供值。如果您的问题与示例中一样简单，您还可以将其他元素设为否定z-index

.positioned {
    position: relative;
    left: -60px;
    z-index: -1;
}

Answer 2

来自Mozzilla - https://developer.mozilla.org/en-US/docs/Web/CSS/position

位置CSS属性选择替代规则进行定位元素，旨在用于脚本动画效果。

因此，为了更改元素位置，您需要告诉它不是静态的，并且您可以通过应用位置属性来实现。

进一步阅读： https://developer.mozilla.org/en-US/docs/tag/Understanding_CSS_z-index

为什么z-index仅适用于定位元素？

2 个答案: