使div具有相对位置以与其他位置重叠

时间:2014-02-01 17:41:55

标签: jquery html css

我有一些相对位置的潜水。我需要其中一个在点击时与其他人重叠。我的解决方案是将其他div的宽度设置为0 px并使其隐藏。还有更优雅的决定吗?

1 个答案:

答案 0 :(得分:1)

这是您想要的http://jsfiddle.net/MryRA/

HTML

<div class="click"></div>
<div class="hide"></div>
<div class="hide"></div>

CSS

div {
    display:block;
    position:relative;
    width:100px;
    height:50px;
    background:red;
    z-index:2;
}
div:nth-of-type(2) {
    background:blue;
    z-index:1;
}
div:nth-of-type(3) {
    background:green;
    z-index:1;
}
.marg_tp {
    margin-top:-50px;
}

JQuery的

$(document).ready(function(){
var flag = true;
$(".click").on('click', function () {
    if (flag) {
        flag = false;
        $(".hide").addClass("marg_tp");
    } else {
        flag = true;
        $(".hide").removeClass("marg_tp");
    }
});
});