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