css - 我如何重叠内联 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

另一种方法是使用具有绝对位置的新内部 div。然后你只需要添加一个类 active，剩下的就是 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;
}