相对位置。为什么它不起作用？

Question

您好，我在另一个父div中的相对定位div有问题。 为什么“am”不在“b1”，“b2”，“b3”之下？

怎么做？

我希望“我”在“b1”，“b2”，“b3”之下？

HTML：

<div id="eq2">
    <div id="bless12" class="male">b1</div>
    <div id="bless22" class="male">b2</div>
    <div id="bless32" class="male">b3</div>
    <div id="helmet2" class="EQ" ondrop="drop(event)" ondragover="allowDrop(event)">h</div>
    <div id="atack2" class="male">at</div>
    <div id="balance2" class="male">ba</div>
    <div id="block2" class="male">bl</div>
    <div id="amulet2" class="EQ" ondrop="drop(event)" ondragover="allowDrop(event)">am</div>
    <div id="armor2" class="EQ" ondrop="drop(event)" ondragover="allowDrop(event)">a</div>
    <div id="legs2" class="EQ" ondrop="drop(event)" ondragover="allowDrop(event)">l</div>
    <div id="boots2" class="EQ" ondrop="drop(event)" ondragover="allowDrop(event)">b</div>
    <div id="shield2" class="EQ" ondrop="drop(event)" ondragover="allowDrop(event)">s</div>
    <div id="ring2" class="EQ" ondrop="drop(event)" ondragover="allowDrop(event)">r</div>
    <div id="weapon2" class="EQ" ondrop="drop(event)" ondragover="allowDrop(event)">w</div>
    <div id="book2" class="EQ">bo</div>                   
</div>

CSS：

#eq2 {
    position: absolute;
    background-color: rgb(50, 50, 50);
    width: 150px;
    right: 0px;
    top: 100px;
    bottom: 0px;
    border-right: 2px ridge;
    border-bottom: 2px ridge;
}
#eq2 div.EQ {
    width: 42px;
    height: 50px;
}
#eq2 div.male {
    width: 14px;
    height: 25px;
}

#eq2 div {
    position: relative;
    background-color: red;
    border: 1px solid;
    float: left;
}

Answer 1

这是因为

<div id="helmet2" class="EQ" ondrop="drop(event)" ondragover="allowDrop(event)">h</div>

与

合作

<div id="amulet2" class="EQ" ondrop="drop(event)" ondragover="allowDrop(event)">am</div>

正如您在图像中看到的那样，因为它们使用相同的EQ类。

您可以尝试为从上到下的每个段重叠使用不同的div。