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 to CSS select each first div without class after div with class?

    How to make a text box have rounded corners?

    How do I emulate a page break with CSS and HTML?

    how to center css navigation bar

    How to force margins to be ready from js before document ready

    how to stop css/jquery rotation

    CSS: Div boxes overlap each other and hide text. How to “clear” them?

    How to show the width of an element in the content of an ':after' pseudo-element?

    How should I convert this object from .PSD to HTML/CSS?

    Change image src for product “showoff”

    How to cancel a CSS style set by 'hover child' selector on event?

    How to add two CSS Class to control in the code behind?

    How do I select every other div class element using just CSS (no js)

    How to create embossed borders in HTML, CSS? [closed]

    How to get an ellipsis to display on text in CSS

    How to wrap image around the long text?

    How to fix background Opacity css

    Show submit button as an image

    How can I use the key name instead of value in map-get?

    How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

    How to create a custom scrollbar on a div (Facebook style)

    How to use position in CSS?

    How do I fade in a div that has a set opacity?

    How do i make liteAccordion (horizontal accordion plugin for jQuery) work in IE6

    How to Inherit grandparent CSS not parent?

    Showing a large amount of HTML alternative content with swfobject & swffit flash site

    How to debug CSS when using GWT

    How do I keep my footer at the bottom of the page without it coming up automatically to fill space if there is little content?

    How to make an image display above the background of an :after element

    How do I keep multiple DIVs the same height using jQuery?