设计不错。
好的,首先我要说的是,我相信解决你的分层问题的方法,就像其他人已经建议的那样,是将该框移出其父级(地图)。
但是你设置了一些限制,所以我会尽量少破坏它们。我不知道如何在不违反任何限制的情况下完成此操作。Z-index是继承的(同样,其他人已经指出了这一点),因此您无法仅使用该工具突破父级的层。
因此,以下是一种使用JavaScript实现相同效果的方法。它很丑陋,可能会在以后给你带来更多麻烦,但至少应该可以工作:
- 找到要置于顶部的div的绝对位置。
- 复制它。
- 隐藏原始元素(如果它是不透明的,则可选)。
- 将副本插入到所有内容的顶部。
如果您正在使用jQuery,则可以使用.offset()
函数获取元素相对于文档的位置。之后就很简单了:
$(document).ready( function() {
$("a[href='#overlay']").click( function() {
pos = $('.wrap').offset();
halecopy = $('.bottom .wrap').clone();
$('.bottom .wrap').css({opacity: 0});
$('body').prepend(halecopy);
halecopy.css({position:'absolute',
top: pos.top,
left: pos.left,
'z-index': 2});
$('.top').fadeIn();
});
$("a[href='#hide']").click( function() {
$('.top').fadeOut( function() {
halecopy.remove();
$('.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演示。