0

背景画像を持つ2つの隣接するdivを持つ小さな例があります。この div は、タイル ベースのエディターのタイルです。画像を最初の div に配置し、画像の位置を変更して、画像が両方の div に重なるようにしたい ( http://jsfiddle.net/WRZJe/16/を参照)。すべての div の z-index を設定し、画像の z-index を設定しました。div と画像の両方の位置属性は絶対に設定されています。

<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 がないように動作します。画像は 2 番目の div の後ろに隠れ、div を含む画像の前にあるすべての div の前になります。

ブラウザ (私は Safari と FF をテストしました) が指定された z-index を無視する原因は何ですか?

更新: 実際のアプリケーション ( http://robitzki.de/zindex.png ) のスクリーンショットを追加しました。これは、含まれている div の後に配置された div の背後に画像が移動することを示しています。

4

4 に答える 4

1

imgタグの前に来るように、最初のdivの前に2番目のdivを配置する必要があります

<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

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

それが機能することを確認するためにフィドルをチェックしてください

于 2013-03-01T10:30:20.793 に答える
1

それぞれdiv.show-tile(すべて兄弟) が独自のスタック コンテキストを作成します。子要素は親のスタック コンテキストに残るためimg、画像の親 div よりも高い z-index を持つ div に隣接している場合は非表示になります。この場合、画像自体 (=子) の z-index は重要ではありません。

画像がすべての div に重なるようにするための最もクリーンな解決策は、それを div の 1 つに配置するのではなく、div の兄弟として別々に配置し.show-tile、最高の 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 に答える