Question

我正在尝试将所有图片放在登录屏幕后面的网页上，但我似乎无法做到这一点。我尝试过使用z-index，但这也无济于事。我想知道是否有人可以帮助我解决这个问题。以下是我的问题的屏幕截图：http://img64.imageshack.us/img64/1267/uplad.png。我试图让所有图像留在黑色图像后面，并在所有内容的前面都有登录屏幕。

CSS

图片CSS

img
{

    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    border: 1px solid #ccc;
    float: left;
    background-color: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    z-index:0;
}

黑色背景的CSS

element.style {

    height: 1843px;
    left: 0;
    position: fixed;
    top: 0;
    width: 1263px;
    z-index: 10000;
}

.modalBackground {

    background-color: #000000;
    opacity: 0.5;
}

登录屏幕的CSS

element.style {

    display: block;
    margin-left: -225px;
    margin-top: -212px;
}

.pagepopups .popup {

    -moz-border-radius: 5px 5px 5px 5px;
    -moz-box-shadow: 0 0 3px #333333;
    background-color: #006699;
    display: none;
    left: 50%;
    padding: 11px 10px;
    position: absolute;
    top: 50%;
    z-index: 10001;
}

Answer 1

Z-index看起来确实是你想要的。 Internet Explorer存在一个已知的z-index错误，它不像其他浏览器那样完全遵循z-index。幸运的是，有一个简单的解决方案。您需要在父元素上指定z-index，直到您尝试为其指定z-index的所有元素的容器为止。我认为问题是IE为每个元素创建了一个“z-index上下文”，除非父元素有一个z-index。 Here's描述问题以及如何解决问题的良好链接。

Answer 2

你未能使图像完全匿名（精选于.. 按钮），我用Google搜索实时网站，它有你所描述的问题，所以我假设它是你正在使用相同的版本。

仅在IE7中进行测试：

添加到.header一条规则：z-index: 10000。
这是在IE7中修复的。
它可能也会在IE6中修复，但如果没有，请告诉我，我会看看。

你很幸运，你没有正确匿名：）

在ie7和ie6中使用css进行图像定位

2 个答案: