manage z-index on multiple objects

Question

See this fiddle: http://jsfiddle.net/scottbeeson/PTh4U/

Here's my dilemma: if I use incremental z-index, like say click(z-index += 1) the user could click on the top most element 100 times rendering the next click on a lower object useless. The way I'm doing it currently, as in the fiddle, I'm setting all like elements to the base z-index and then setting the current one higher.

$(document).on('click','.tile',function() {
    $('.tile').css('z-index','10');
    $(this).css('z-index','100');
});

This works for the most part, but it has a bit of odd behavior that you can see if you just click around a couple times. Namely, the last clicked item sometimes goes further back (I guess items with the same index are arbitrarily chosen to be on top or not?).

So what behavior do you actually want? The more recently clicked the item is, the closer to front it is? — Mike Brant
– Mike Brant, Commented Jun 14, 2013 at 21:13
Not true. The MOST recently clicked item comes to the front, but the rest are basically random. Just go to the fiddle and click around and you should see what I mean. — user736893
– user736893, Commented Jun 14, 2013 at 22:02
I was not asking what the current behavior is, but what the desired behavior is. You were not really specific about that in your question. The code as shown would put all non-current elements at the same z-index, thus making their stacking more unpredictable. Are you looking to have most recently clicked items higher in stack (with current one on top obviously)? — Mike Brant
– Mike Brant, Commented Jun 14, 2013 at 22:50

score 1 · Accepted Answer · 2013-06-14 21:09:35Z

1

The only solution I can think of is to keep track of "onTop" and "highest" and thus say something like (updated with working code):

http://jsfiddle.net/scottbeeson/PTh4U/3/

$(document).on('click','.tile',function() {
    $(this).css('z-index',zHighest + 1);
    zHighest += 1;
});

Anyone see a problem with this or recommend a better way?

edited Jun 14, 2013 at 21:09

answered Jun 14, 2013 at 21:00

user736893

Sign up to request clarification or add additional context in comments.

3 Comments

Jacob Over a year ago

This is fine, with the caveat that if someone did a hideous number of clicks on different items, you may eventually overflow the highest z-index. That probably won't be a concern, but if it is, you would have to maybe shift every element's z-index that's greater than the clicked item down one.

user736893 Over a year ago

Thanks for affirmation and very good point, also, I did make it work: jsfiddle.net/scottbeeson/PTh4U/1 Seems to work very well.

user736893 Over a year ago

I actually realized you don't even need the whole topmost flag... jsfiddle.net/scottbeeson/PTh4U/3

Collectives™ on Stack Overflow

manage z-index on multiple objects

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related