How to use css Z-index for Bring-to-front, bring-forward, bring-back, bring-backward

Categories: CSS

Every good UI tool has these icons that says something similar to

Image

 

“bring front”, bring forward, move back, move backward

For my web tool, I need to implement similar functionality.

Say for eg. if there are two or more charts on a web page and the designer needs to specify if one bar chart always stays on top of every other overlapping chart then they can do so by using the options.

HTML CSS provides a simple way to organize overlapping html objects. It is known as z-index.

Check this article for more information

The way I plan to implement is as below

First let us clarify what each action means

Move Front : Means bring the selected element all the way to the front of all overlapping elements

Move Forward: Means bring the selected element just one step forward, i.e if the selected element is at the very bottom of a layer consisting of 4 overlapping elements then just bring it closer to the top. So it will take 4 “Move Forward” actions to bring the bottom element to the very top.

Same is the case with “Move Back” and “Move Backward” except the actions are now reversed.

How to implement this?

The easiest way is to find the lowest z-index and the highest z-index values on the page. When the user selects to ‘Move Front’ then simply make the selected element’s z-index value 1 plus the highest z-index value on the page. If the user selects ‘Move forward’ then simply increment the current z-index by 1.

This seems to be a good approach but a more refined approach would be to find the highest and lowest z-index value of the overlapping elements only. But then it would require more CPU cycles to find the overlapping elements.

It is a trade off so I think will just take the initial approach and later improve it.

« « Particle generator using HTML5 Canvas                        Align Div Bottoms using jQuery » »

Comments are closed.