我如何重叠内联div?

时间:2014-08-01 18:08:08

标签: css css-position

我正在做一个日历,我有多个内联显示的Div:

<div class="col-1">
<div id="1" class="drop"></div>
<div id="2" class="drop"></div>
<div id="3" class="drop"></div>
<div id="4" class="drop"></div>
<div id="5" class="drop"></div>
<div id="6" class="drop"></div>
<div id="7"class="drop"></div>
<div id="8" class="drop"></div>
</div>

我希望在单击此Div时调整特定div的大小,所以我在JQuery中创建了一个小脚本来执行此操作:

$('.drop').on('click', function() {

    var get_id = $(this).attr('id');
    $('#' + get_id).css({"height": "300","width":"300", "background-color": "red"});

});

CSS:

.col-1 div{
    height: 100px;
    width:100px;
    background-color:green;
    display:inline-block;
}

但是当我点击Div时,我想重叠所有div,如下所示:

我该怎么做?

2 个答案:

答案 0 :(得分:0)

您可以尝试CSS转换:

http://jsfiddle.net/StephanWagner/EuD7x/

    var get_id = $(this).attr('id');
    $('#' + get_id).css({
        "background-color": "red",
        transform: 'scale(2)',

    });

这将使div保持一致。 但它不会真正使div更大,它只会扩展它,因为CSS声明:)

答案 1 :(得分:0)

另一种方法是使用具有绝对位置的新内部div。然后你只需要添加一个活动的类,其余的就是CSS:

http://jsfiddle.net/StephanWagner/EuD7x/1/

$('.drop').on('click', function() {
    $(this).addClass('active');
});

<div class="col-1">
<div id="1" class="drop"><div class="inner">1</div></div>
...
</div>

.col-1 div{
    height: 100px;
    width:100px;
    background-color:green;
    display:inline-block;
    position: relative;
}


.col-1 .inner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.col-1 .drop.active .inner {
    top: -20px;
    left: -20px;
    height: 140px;
    width:140px;
    background-color: red;
    z-index: 20;
}