nelkor nelkor - 1 month ago 4
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

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.

Comments