Question

我有一个小例子，两个相邻的div带有背景图像。这个div是基于图块的编辑器中的图块。我想将图像放入第一个div并更改图像的位置，以便图像与两个div重叠（参见http://jsfiddle.net/WRZJe/16/）。我设置了所有div的z-index，并设置了图像的z-index。 div，div和image的position属性设置为absolute：

<body id="exploration-body">
    <div class="dungeon-container" style="left: 1040px; top: 720px;">
        <div class="dungeon-canvas-full-screen" id="dungeon_canvas">
            <div style="top: -720px; left: -1040px; 
                   background-position: -82px -162px;" class="show-tile">
                <img id="token-1" class="token-img"        
                   src="1.png" alt="token1" style="top: 0px; left: 40px">
            </div>            
            <div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
            </div>            
        </div>
    </div>
</body>

以下是相关的css代码：

.dungeon-container {
    position: absolute;
}

.show-tile {
    background-image: url("stone_dungeon.png");
    height: 80px;
    width: 80px;
    position: absolute;
    z-index: 5;
}

.token-img {
    position: absolute;
    z-index: 50;
}

由于图像的z-index高于两个div，我希望图像在两个div之前绘制。但是页面的行为与给定的z-index不同。图像隐藏在第二个div之后，并且在包含div的图像之前位于每个div的前面。

什么可能导致浏览器（我测试过Safari和FF）忽略给定的z-index？

更新：我添加了实际应用程序（http://robitzki.de/zindex.png）的屏幕截图，显示图像移动到包含div之后的那些div后面。

Answer 1

你必须把第二个div放在第一个div之前，以便它出现在img标签

之前

<body id="exploration-body">
    <div class="dungeon-container" style="left: 1040px; top: 720px;">
        <div class="dungeon-canvas-full-screen" id="dungeon_canvas">
            <div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
            </div>            
            <div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile">
                <img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: 0px; left: 40px">
            </div>            
        </div>
    </div>
</body>

http://jsfiddle.net/WRZJe/17

如果你可以将img标签从div中移出并使用类似的坐标将它们定位到div，那么以下内容将产生所需的显示

<body id="exploration-body">
    <div class="dungeon-container" style="left: 1040px; top: 720px;">
        <div class="dungeon-canvas-full-screen" id="dungeon_canvas">
            <img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -1000px" />
            <img id="token-2" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -930px" />
            <div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
            </div>            
            <div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile">
            </div>            
        </div>
    </div>
</body>

http://jsfiddle.net/WRZJe/20

Answer 2

因为第二个.show-tile的图片比z-index高，所以图片会被剪切

试试这个：

.dungeon-container {
    position: absolute;
}

.show-tile {
    background-image: url("stone_dungeon.png");
    height: 80px;
    width: 80px;
    position: absolute;
    /*z-index: 5;*/
}

.token-img {
    position: absolute;
    z-index: 1;
}

Check fiddle看它运作

Answer 3

每个div.show-tile（都是兄弟姐妹）创建自己的堆叠上下文！子元素保留在父元素的堆叠上下文中，因此如果它与具有较高z-index的div相邻作为图像父div，则将隐藏img。 图像本身的z-index（= child）在这种情况下无关紧要。

为了让图像与所有div重叠，最干净的解决方案是不将其放入其中一个div中，而是将其作为兄弟单独放入.show-tile div并给它最高的z指数。

或者，您可以省略对div的绝对定位 - 这会使img拥有它的位置取决于#dungeon_canvas。

如果你不能这样做，你必须确保保存你图像的div总是具有最高的z指数。

Answer 4

现在就像这样 Live Demo

轻松做到这一点

Html代码

<div class="main-container"> 
    <div class="pic-1 pic-5"></div>
    <div class="pic-1 pic-3"></div>
    <div class="pic-1 pic-2"></div>
    <div class="pic-1 pic-4"></div>
    <img src="http://dungeonpilot.com/assets/tokens/1.png" alt="" class="pic-change">
</div>

<强>的CSS

.pic-1 {
    background-image: url("http://dungeonpilot.com/assets/stone_dungeon.png");
    height: 80px;
    width: 80px;
    float:left;
    position:relative;
    background-position: -3px -3px;
}
.pic-2{
    clear:left;
}
.pic-change{
    position:absolute;
    left:40px;
    top:40px;
    z-index:3;
}
.main-container{
    position:relative;

}
.pic-4{
    z-index:4;

}

的 Demo 的

z-index无效

4 个答案: