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-index取数字，而非测量值。

z-index : 30;

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

如果您预期缩放或剪切，那么您应该对transform : rotate3d及其同类进行研究。

Answer 2

首先，z-index应为无单位数。（例如z-index : 1000;而非z-index: 1000px;）

但是你的jsfiddle只包含一个元素，所以我不确定你期望发生什么。似乎你可能不明白z-index的作用。您可能需要阅读：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index

z-index不起作用

2 个答案: