0

我有一个小例子，两个相邻的 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 之后。

4

4 回答 4

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

于 2013-03-01T10:11:31.290 回答
1

因为第二.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;
}

检查小提琴以查看它的工作原理

于 2013-03-01T10:30:20.793 回答
1

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

为了使图像与所有 div 重叠，最干净的解决方案是不将其放入其中一个 div 中，而是将其作为.show-tilediv 的兄弟分开放置，并为其赋予最高的 z-index。

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

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

于 2013-03-01T10:35:22.037 回答
1

现在像这个现场演示一样轻松地做到这一点

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;

}

演示

于 2013-03-01T10:37:07.513 回答