How can i overlap inline divs?


Tags: css,css-position

Problem :

I'm doing a calendar, and I have multiple Divs that are being displayed inline:

<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>

And i would like the resize a specific div when this Div is clicked, so i created a small script in JQuery to do that:

$('.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;
}

But i would like to overlap all the divs when some Div is clicked, like this:

How can i do that?



Solution :

Another approach is to use a new inner div which has an absolute position. Then you just need to add a class active, the rest does 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;
}

    CSS Howto..

    How can I register a css page from an ascx control?

    Always show hover text in an appropriate position

    How to dynamically change element alignment?

    How to remove unwanted whitespace css/html

    How do you add PHP to CSS?

    How to style a