一尘不染

如何正确使用z-index?

css

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

我已将右列(文本所在的位置)和菜单栏的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;
}

阅读 539

收藏
2020-05-16

共1个答案

一尘不染

z-index属性仅在还position应用了一个属性时才起作用(不计算position: static;,这是默认值)。

根据规范,以下所有内容均可使用:

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

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

2020-05-16