html - 如何正确使用 z-index？

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;。