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

概述我知道z-index只适用于定位元素,但我想知道为什么会这样.这种行为是否有任何充分的理由,或者它只是那些半任意规范决策之一？ 我在使用这样的代码时遇到了这个问题： HTML <div> <img class="not-positioned" src="http://placekitten.com/g/200/300"> <img class="positioned" src =" 我知道z-index只适用于定位元素,但我想知道为什么会这样.这种行为是否有任何充分的理由,或者它只是那些半任意规范决策之一？

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

HTML

<div>    <img  src="http://placekitten.com/g/200/300">    <img  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-located图像位于.positioned图像后面,尽管.not-located的z-index值较高),但我很难理解这种行为的基本原理.

谢谢.

解决方法 元素位于所有3个维度中

>使用左右两个x轴
>使用顶部和底部在y轴上
>使用z-index在z轴上

当然z-index与其他z-index不是100％相似,因为它只描述堆叠而不是“真实”位置,但是你可以在z轴上做所有的事情,因为你没有固定的边界轴.

因此,如果要设置其z-index,则需要为元素提供除static之外的位置值.如果您的问题与示例中一样简单,您还可以为其他元素提供负z-index

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

总结

以上是内存溢出为你收集整理的html – 为什么z-index仅适用于定位元素？全部内容，希望文章能够帮你解决html – 为什么z-index仅适用于定位元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。