Question

For a browser-based game I’m working on, I want to allow the user to display their units. A user has the ability to control multiple units, represented by transparent .png images layered using the CSS z-index property. The name of the PNG is stored in a MySQL database. The method of displaying a single unit that I’ve used is using absolute positioning to position all 4 layers of the sprite (skin, clothes, hair, face) and setting the z-index property. The problem is I can’t use this for an indefinite number of units, because otherwise they all end up in the same place.

I need some dynamic method of positioning the units so that I can display 5 per row or something along those lines. Here’s an example of what I’m trying to do that I made (excuse the bad art):

• Example of layering
• Stylesheet

Answer 1

For a better structure, you should have a div for each of your units. In the div for your unit, you would have the 4 layers.

The HTML for one unit:

<div id="character1" class="character">
    <div class="charlayer1"></div>
    <div class="charlayer2"></div>
    <div class="charlayer3"></div>
    <div class="charlayer4"></div>
</div>

The CSS:

.character {
    position: absolute;
}

#character1 {
    left: 60%;
    top: 200px;
}

.charlayer1, .charlayer2, .charlayer3, .charlayer4 {
    position: absolute;
    top:0;
    left:0;
}

.charlayer1 {z-index:-4;}
.charlayer2 {z-index:-3;}
.charlayer3 {z-index:-2;}
.charlayer4 {z-index:-1;} 

Now you could add multiple units by using the same html structure, but changing its ID and position.

Hope it helps! I could elaborate more, but I would need to know what you want to do exactly with your layers.