z-index 未激活答案

【问题标题】：z-index not activez-index 未激活
【发布时间】：2013-02-15 19:09:27
【问题描述】：

我有一个小例子，两个相邻的 div 带有背景图像。这个 div 是基于磁贴的编辑器中的磁贴。我想将图像放入第一个 div 并更改图像的位置，以便图像与两个 div 重叠（请参阅http://jsfiddle.net/WRZJe/16/）。我已经设置了所有 div 的 z-index 并且我已经设置了图像的 z-index。 divs 和 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-indexes。图片隐藏在第二个 div 之后，并且会在包含 div 的图片之前的每个 div 前面。

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

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

【问题讨论】：

标签： css z-index

【解决方案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

【讨论】：

这只会解决示例问题，而不是忽略 z-index 的事实。如果我也想将图像放入第一个 div 并希望将它与两个 div 重叠怎么办？但是谢谢你看它！ :-)
由于编辑器是基于图块的，这使得调整整个地图的大小非常方便。实际问题仅在将地图上的标记拖到其他图块时才会出现。我将实施的解决方法（如果我没有找到解决方案）是，当用户开始拖动令牌时将图像从源 div 移动到容器 div（具有适当的位置固定），然后将令牌移动到目标 div，当用户丢弃令牌时。

【解决方案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 看看它的工作原理

【讨论】：

这行得通，但我不明白为什么行得通。在我的示例中 .token-img 的 z-index 是 50，而 .show-tile 的 z-index 是 5，所以我认为 .token-img 必须更靠近屏幕，因此在 .show-tile 前面.我错过了什么？
因为第二个.show-tile的z-index比图片高，所以图片会被截掉
@Mark 第二个 .show-tile 的 z-index 为 5，图像的 z-index 为 50，因此该图像具有最高的 z-index 属性。
第二个 .show-tile 是新的堆叠顺序，所以第一个中的图像永远不会“离你更近”。子元素保留在父元素的堆叠上下文中
我会尝试，如果摆脱磁贴 div 的 z-index 可能是一个解决方案。这对我来说显然是最简单的解决方案。谢谢！

【解决方案3】：

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

为了使图像与所有 div 重叠，最简洁的解决方案是不将其放入其中一个 div，而是将其作为.show-tile div 和给它最高的 z-index。

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

如果你不能这样做，你必须确保保存图像的 div 始终具有最高的 z-index。

【讨论】：

谢谢，您的解释帮助很大。我认为在包含 div 的图像的 z-index 上添加一点可能是一个可行的解决方案。

【解决方案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

【讨论】：