z-index不起作用

Question

我有一个问题，我试图使用z-index使我的设计具有3D感觉，但是使用它时我看不到任何变化

我的CSS如下：

 .test1
    {
        background-color:#666;
        opacity:0.4;
        width:500px;
        height:500px;
        z-index:1000px; 
        position:absolute;
        top:0;
        left:0;

    }

和小提琴的链接是：

http://jsfiddle.net/hminaee/a89Z4/

谁能告诉我这是什么问题？

Answer 1

z索引采用数字而不是度量。

z-index : 30;

而且，它无法神奇地制作任何3D图像； 它所做的就是将那个框移动到与它相同位置的其他任何框的前面，该位置的z索引较低（或者是position:static; ）。

如果您期望缩放或剪切，则应研究transform : rotate3d及其transform : rotate3d 。

Answer 2

例如， z-index应该是一个无单位数。 （例如z-index : 1000;不是z-index: 1000px; ）

而且您的jsfiddle仅包含一个元素，因此我不确定您期望发生什么。 似乎您可能不了解z-index功能。 您可能需要阅读：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index