nelkor nelkor - 1 year ago 67
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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download