Question

请在此处查看此页：

http://www.blakearchive.org/blake/public/exhibits/canterburySpecial.html

菜单栏应位于文本上方，右侧的红色和黑色图库菜单应覆盖菜单栏和文本。

我已将右列（文本所在的位置）和菜单栏的z-index设置为1，红色和黑色图库菜单的z-index设置为-1。但是div仍然彼此相邻，而不是像他们应该的那样彼此重叠。

相对的css在这里：

#menu {
    width: 100%;
    float: left;
    border-top: 5px solid #823
    z-index: 1;
}
#columns .right {
    float: right;
    width: 28%;
    height: 90%;
    overflow-y: auto;
    padding-right: 3%;
    padding-left: 1%;
    padding-top: 1%;
    text-align: justify;
    z-index: 1;
}
#menubar {
    float: right;
    width: 18%;
    padding-right: 3%;
    padding-left: 1%;
    z-index: -1;
}

Answer 1

z-index applies to positioned elements

定位元素为defined，作为position属性的值不是static的元素。

static是默认值。

您尚未对任何元素应用不同的position值。

您可能想要position: relative;。

Answer 2

z-index属性仅在应用了position属性时才起作用（不计算position: static;，这是默认值）。

根据规范，以下所有内容都可行：

position: fixed;
position: absolute;
position: relative;
position: sticky; /* Limited support, currently in Firefox and Opera */

唯一的例外是flex容器或CSS grid。

如何正确使用z-index？

2 个答案: