使用z-index

Question

我想让我的“profile-stuff”div出现在我的“profile-wrap”div之上。我尝试使用z-index，但它似乎不起作用。我做错了什么？

JSFIDDLE：http://jsfiddle.net/HCEN8/

我的CSS：

#profile-stuff {
padding: 40px 40px 0px 40px;
height: 1000px;
width: 750px;
z-index: 150;
}

Answer 1

您需要为元素添加定位

#profile-stuff {
    position: relative;
    padding: 40px 40px 0px 40px;
    height: 1000px;
    width: 750px;
    z-index: 150;

}

Answer 2

为了使z-index起作用，您还必须具有定位属性。

position: relative;
position: absolute;
position: fixed;

Answer 3

要使z-index有效，您的身份个人资料的div需要拥有position属性。

像这样修改你的CSS：

#profile-stuff {
    position: relative;    // <-- Add this property
    padding: 40px 40px 0px 40px;
    height: 1000px;
    width: 750px;
    z-index: 150;
}

将position: relative添加到#profile-stuff css，它应该可以正常工作。

我已经相应地修改了你的小提琴。 JSFiddle

Answer 4

z-index CSS rule需要某种定位;将以下任何规则添加到#profile-stuff：

position: relative;

或

position: absolute;

或

position: fixed;

Answer 5

z-index属性仅适用于定义了定位的元素。您需要设置'position'属性。

#profile-stuff {
    padding: 40px 40px 0px 40px;
    height: 1000px;
    width: 750px;
    position: absolute;
    z-index: 150;
}