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

虽然它产生了这个：

图像位于封面图像下方。我不认为这两个图像是儿童，它们应该是独立的，虽然这是我的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/

中一切正常的图片

CSS图像和Z索引

1 个答案: