Great layout.
In my opinion, the key to resolving your layering issue, as suggested by others, is to move the box outside of its parent container (the map).
However, considering the constraints you've mentioned, I'll attempt to minimize any disruptions. Breaking out of your parent container's layer using only the z-index property might not be feasible as it is inherited, as mentioned by others.
One potential approach to achieving the desired effect involves using JavaScript, albeit with some drawbacks and potential future challenges:
- Determine the absolute position of the div you want to place on top.
- Create a duplicate of the div.
- Hide the original div (optional if it's opaque).
- Insert the duplicate on top of all elements.
If you are using jQuery, you can use the .offset() function to obtain the position of elements relative to the document. The implementation could be as follows:
$(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});
});
});
});
This scripting solution worked well for me with the provided markup:
<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>
Accompanied by the following styles:
.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;
}
For a practical demonstration, you can refer to this jsfiddle demo.