Procedural generated Z-index using classes

Question

I am trying to create a system for posts that will allow me to produce new posts but as it will be overlapping one to another I am looking for a way to create a different Z-index automatically when creating a new div of that class.

Can it be done with Jquery?

Thanks in advance

here is a JsFiddle for a visual representation of what I have and what Im looking for.

http://jsfiddle.net/Q8mkE/8/

    z-index:10000

Answer 1

You don't really need to rely on JS to assign incremental z-index. Instead, we can just increase the z-index of the element you have hovered, so it overlaps the rest.

See fiddle here

My trick is to rely on jQuery to duplicate the content of each .article element, which is hidden by default and only shown when hovered over:

$(function() {
    $('.article').each(function() {
        // Create duplicate
        var $dup = $('<div />', {
            'class': 'duplicate'
        }).html($(this).html());

        // Append duplicate
        $dup.appendTo($(this));
    });
});

And here is the updated CSS:

.article{
    width:200px;
    height:200px;
    background-color: blue;  
    margin: 20px;
    float: left;
    display: inline-block;
    /* We set their positions to relative so that z-index works */
    position: relative;
    z-index: 1;
}
    .article:hover {
        /* Increase z-index when hovered on, ensures overflowing content overlaps neighbouring/adjacent divs */
        z-index: 2;
    }

.article > .duplicate {
    background-color: red;
    display: none;
    position: absolute;
}
    .article:hover > .duplicate {
        display: block;
        height: 400px;
        top: 0;
        left: 0;
        right: 0;
    }

Answer 2

UPDATED

I am not sure you need jQuery for this as you said. You can just play with css float and height properties. You can add transition property if you want more beautiful ui (click me).

OLD

It is not good idea to use z-index at all. Are you sure you need it?

Yes, you can manage element css via jQuery.

Look jQuery .css()

Example:

var counter = 0;
//work with counter
$("#someId").css("z-index", counter);