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

Question

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

我需要一些动态的方法来定位单元，以便我可以每行显示 5 个或沿着这些线显示。这是我正在尝试做的事情的一个例子（请原谅糟糕的艺术）：

• 分层示例
• 样式表

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 和位置。

希望能帮助到你！我可以详细说明，但我需要知道你想用你的图层做什么。