Question

对于我正在处理的基于浏览器的游戏，我想让用户显示他们的单位。用户可以控制多个单元，由使用CSS .png属性分层的透明z-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和位置。

希望它有所帮助！我可以详细说明，但我需要知道你想要对你的图层做些什么。

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

1 个答案: