In my latest adventure in the land of Javascript I have streamlined my strategy for organizing my z-index structure for complex applications. Complex being where “windows” and various items may need to be laid over the top of other elements in the DOM. I thought I would share this strategy.

in the global section of my javascript document, I declare a lower and upper zIndex boundary for each “layer” within the document.

For example, I might have a space used for a chess game, laid out in an isometric fashion, meaning chess pieces will overlap to some degree. And all chess pieces will lay over the board (consisting of several layers giving the illusion of a single board). In addition, several menus will be laid over the entire game viewer when called.

So in this example, my global declarations might look like this.

var numBoardLayers=3;
var numWindowLayers=10;
var numPieces=32;
var boardLower=1;
var boardUpper=boardLower+numBoardLayers-1;
var pieceLower=boardUpper+1;
var pieceUpper=pieceLower+numPieces-1;
var windowLower=pieceUpper+1;
var windowUpper=windowLower+numWindowLayers-1;

As you can see, the number of layers in the board may be increased etc without the need to change scores of z-index values. Now that the global variables are set, they can be used within the functions that construct the board.

For example, a chess piece is rendered into the DOM at tile number (x), the z-index value can be set at pieceLower+(x)-1

Tagged with:

One Response to z-index Organization strategy

  1. Interesting strategy, thanks for sharing :)

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting

Switch to our mobile site