javascript - CSS 图像和 Z 索引

Question

所以我总共显示了 3 张图片，其中 2 张需要比另一张图片更高的 Z 索引，所以 2 张图片在一张图片上方。我在我的 CSS 中做了这个:

#cover {
    background: url("my_name.png");
    position: absolute;
    left: -200px;
    z-index: 10;
}

#twitterImg {
    overflow: hidden;
    background: #3C3C3C;
    margin-left: -330px;
    margin-top: -70px;
    z-index: 20;
}

#youtubeImg {
    overflow: hidden;
    background: #3C3C3C;
    margin-left: 410px;
    margin-top: -130px;
    z-index: 21;
}

虽然它产生了这个:

图像在封面图像下方的位置。我不认为这 2 个图像是子图像，它们应该是独立的，尽管这是我的 HTML 以防万一您想要查看它。

Pastebin Because HTML is weird on stack overflow

Full CSS

Answer 1

z-index 在您未设置位置时将不起作用，因此请将 position 设置为 relative ..您可以试试这个

#twitterImg {
    position : relative;
    overflow: hidden;
    background: #3C3C3C;
    margin-left: -330px;
    margin-top: -70px;
    z-index: 20;
}

#youtubeImg {
    position : relative;
    overflow: hidden;
    background: #3C3C3C;
    margin-left: 410px;
    margin-top: -130px;
    z-index: 21;
}

或者你可以设置

#navigation {
    position : relative;
    width: 638px;
    height: 80px;
    font-family: Roboto;
    font-size: 11px;
    font-weight: bold;
    padding-top: 10px;
    text-transform: uppercase;
    margin: 0 auto;
    z-index: 21;
}

这是您网站上一切正常的图像 http://darklegionrp.byethost24.com/