素敵なデザイン。
わかりましたので、他の人がすでに示唆しているように、レイヤーの問題の解決策は、そのボックスをその親（マップ）の外に移動することだと最初に言います。
しかし、あなたはいくつかの制約を設定しているので、できるだけ破らないようにします。あなたの制約を壊さずにこれを行う方法がわかりません。Z-index は継承されているため (これも他のユーザーが指摘しています)、そのツールだけで親のレイヤーから抜け出すことはできません。
そこで、JavaScript を使用して同じ効果を得る 1 つの方法を次に示します。これは醜く、後でさらに頭痛の種になるかもしれませんが、少なくとも機能するはずです。
- 上に置きたいdivの絶対位置を見つけます。
- それのコピーを作成します。
- オリジナルを非表示にします (不透明な場合はオプション)。
- すべての上にコピーを挿入します。
jQuery を使用している場合は、関数を使用してドキュメントに対する要素の位置を取得できます.offset()。その後はかなり簡単です：
$(document).ready( function() {
$("a[href='#overlay']").click( function() {
// 1: get the position
pos = $('.wrap').offset();
// 2: make a copy
halecopy = $('.bottom .wrap').clone();
// 3: hide the original
$('.bottom .wrap').css({opacity: 0});
// 4: Insert new label on top of everything
$('body').prepend(halecopy);
// position the new label correctly
halecopy.css({position:'absolute',
top: pos.top,
left: pos.left,
'z-index': 2});
// show the "top" layer
$('.top').fadeIn();
});
$("a[href='#hide']").click( function() {
$('.top').fadeOut( function() {
// remove the label copy
halecopy.remove();
// show the original again
$('.bottom .wrap').css({opacity: 1});
});
});
});
このスクリプトは、このマークアップで機能します。
<div class="top">
<div class="label">
<p>Whatever</p>
</div>
</div>
<div class="bottom">
<div class="wrap">
<div class="label">
<p>Haaaleluuuuia!</p>
</div>
</div>
</div>
<a href="#overlay">show</a>
<a href="#hide">hide</a>
これらのスタイルで:
.top,
.bottom {
position: absolute;
top: 10%;
left: 3%;
}
.top {
z-index: 1;
padding: 2%;
background: rgba(0, 127, 127, 0.8);
display:none;
}
.bottom {
z-index: -1;
padding: 3%;
background: rgba(127, 127, 0, 0.8);
}
.label {
color: #fff;
}
.wrap {
outline: 1px dashed rgba(127, 0, 0, 0.8);
background: rgba(127, 127, 127, 0.8);
}
.bottom .label {
z-index: 10;
}
そして、ここに便利な jsfiddle demo があります。
