Jishnuraj Jishnuraj - 3 years ago 172
CSS Question

Raise one div over another one

I have two html div's.

<div style="height:100px;width:100px;position:fixed;left:0;top:0;background-color:red;" id="1">
<div style="height:200px;width:200px;position:fixed;left:0;top:0;background-color:yellow;" id="2">
</div>
</div>


These two div are positioned on the same place. So, the second div is raised over the first div. I want to raise first div over the second one.
I can do it by changing the position of the two div one to other like this:

<div style="height:200px;width:200px;position:fixed;left:0;top:0;background-color:yellow;" id="1">

<div style="height:100px;width:100px;position:fixed;left:0;top:0;background-color:red;" id="2">
</div>
</div>


But I can't do it. Because I want to make #2 sibling of #1.
How to do it without changing the position of #1 and #2?

Answer Source

You put the yellow one to be as a child of the red, in that case there is no way to bring the red (parent) to be in front of the child.

What i've done is to make both of the divs to be a siblings. In that way you can control the z-index property to bring one of them to the front.

<div style="height:100px;width:100px;position:fixed;left:0;top:0;background-color:red; z-index:10;" id="1"></div>
<div style="height:200px;width:200px;position:fixed;left:0;top:0;background-color:yellow;z-index:0;" id="2">
</div>

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