如何正确使用z-index？ [英] How do I use the z-index properly?

问题描述

在此处查看此页面：

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

菜单栏应该在上面右边的文本和红色和黑色的图库菜单应该覆盖菜单栏和文本。

The menu bar is supposed to go above the text and the red and black gallery menu on the right should go over the menu bar and text.

我设置了右列的z-index文本坐落），菜单栏为1，红色和黑色图库菜单的z-index为-1。

I've set the z-index for the right column (in which the text sits) and the menu bar to 1, and the z-index of the red and black gallery menu to -1. But the divs still still next to each other, rather than on top of each other as they're supposed to.

相对的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; / code>，这是默认值）。

The z-index property will only work when there is also a position property applied (not counting position: static;, which is the default).

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

All of the following will work, according to the spec:

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

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

The only exceptions are within a flex container or a CSS grid.

这篇关于如何正确使用z-index？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！