nelkor nelkor - 10 months ago 44
CSS Question

Position relative. Why it doesn't work?

enter image description here

Hello, I have a problem with relative positioning divs in another parent div.
Why "am" is not under "b1", "b2", "b3"?

How to do it?

I wish "am" was under "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 Source

It is because

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

is coliding with

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

as you can see in your image because they use the same class EQ.

You could try to use different divs for each segment from top to bottom which are overlapping.