html - 使用 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的 id 为profile-stuff需要有一个position属性。

像这样修改你的CSS：

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

添加position: relative到你的#profile-stuffCSS，它应该可以正常工作。

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

Answer 4

z-indexCSS 规则需要某种定位；将以下任何规则添加到#profile-stuff：

position: relative;

或者

position: absolute;

或者

position: fixed;

Answer 5

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

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