php - 使用 z-index 动态分层？

Question

对于我正在开发的基于浏览器的游戏，我希望允许用户显示他们的单位。用户可以控制多个单元，这些单元由使用 CSS z-index 属性分层的透明 .png 图像表示。 PNG 的名称存储在 MySQL 数据库中。我使用的显示单个单元的方法是使用绝对定位来定位 Sprite 的所有 4 层(皮肤、衣服、头发、面部)并设置 z-index 属性。问题是我不能将它用于不确定数量的单元，否则它们最终都会出现在同一个地方。

我需要一些动态的方法来定位单位，这样我就可以每行显示 5 个或类似的东西。这是我正在尝试做的一个例子(请原谅糟糕的艺术):

• > Example of layering
• > Stylesheet

Answer 1

为了更好的结构，您应该为每个单元设置一个 div。在您的单元的 div 中，您将拥有 4 层。

一个单元的 HTML:

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

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;} 

现在您可以使用相同的 html 结构添加多个单元，但更改其 ID 和位置。

希望对您有所帮助!我可以详细说明，但我需要知道您想对图层执行的操作。