html - 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;

    }

fiddle 链接是:

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

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

Answer 1

z-index 采用数字，而不是测量值。

z-index : 30;

此外，它不会神奇地制作任何 3D 内容；它所做的只是将该框移动到与其相同位置的任何其他框的前面，该框具有较低的 z-index(或者是 position:static;)。

如果您希望缩放或剪切，那么您应该研究 transform : rotate3d 及其同类产品。