菜单栏应该位于文本上方,右侧的红色和黑色图库菜单应位于菜单栏和文本上方。
我已将右列(文本所在的位置)和菜单栏的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; }
该z-index属性仅在还position应用了一个属性时才起作用(不计算position: static;,这是默认值)。
z-index
position
position: static;
根据规范,以下所有内容均可使用:
position: fixed; position: absolute; position: relative; position: sticky; /* Limited support, currently in Firefox and Opera */
唯一的例外是在flex容器或CSS中grid
flex
grid