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