我如何重叠内联div？

Question

我正在做一个日历，我有多个内联显示的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，如下所示：

我该怎么做？

Answer 1

您可以尝试CSS转换：

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

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

    });

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

Answer 2

另一种方法是使用具有绝对位置的新内部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;
}