CODEWITHSUNDEEP
htmlcss
edisonthk
edisonthk

Reputation: 1423

How to make div to overlay parent div

Pink and green layout are parent layout. When gray layout is clicked blue layout will be created. I want blue layout overlay the parent layout (pink and green) and comes to top.

But the blue layout is overlay by pink layout. I need help on it.

div{
    display:block;
}
#content{
    height:400px;
    width:100%;
    background-color:green;    	
}
.center{
    width:100px;
    height:100px;
    background-color:#808080;        	
    text-align: center;
    margin:auto;
}      
#foo{
    background-color:#2060ff;
    border: 1px solid #000;
    width:50px;
    height:50px;
}
<div id="content">    
    <div id="d" class="center">    
        <div class="center">
            Click here to create new blue element
        </div>    		
    </div>       
    <div style="background-color:pink;width:100%;height:20px;"></div> 	
</div>

Check JSFiddle

Upvotes: 1

Views: 9994

Answers (4)

neoeahit
neoeahit

Reputation: 1799

What you need to do is to use a z-index. According to http://www.w3schools.com/cssref/pr_pos_z-index.asp specifies the stack order of an element. Please note you will have to make the div's relative Please see code

http://jsfiddle.net/wbfTq/16/

    div{
    display:block;
}
#content{
    position: relative;
    height:400px;
    width:100%;
    background-color:green;     
}
.center{
    width:100px;
    height:100px;
    background-color:#808080;           
    text-align: center;
    margin:auto;
}      
#foo{
    position: relative;
    background-color:#2060ff;
    z-index:1px;
    border: 1px solid #000;
    width:50px;
    height:50px;
}

Do let me know if this answers your question!

Upvotes: -1

brbcoding
brbcoding

Reputation: 13586

Add some positioning and a z-index...

#foo{
    position: relative;
    background-color:#2060ff;
    border: 1px solid #000;
    width:50px;
    height:50px;
    z-index: 1;
}

DEMO

Upvotes: 2

Jon Harding
Jon Harding

Reputation: 4946

You need to adjust the z-index. z-index needs to be positioned to work correctly. See jsfiddle.

#foo{
    background-color:#2060ff;
    border: 1px solid #000;
    width:50px;
    height:50px;
    position:relative;
    z-index:100;
}

Upvotes: 2

shennan
shennan

Reputation: 11656

Can I suggest absolute positioning?

#foo{
    position:absolute; // <-- here is the change
    background-color:#2060ff;
    border: 1px solid #000;
    width:50px;
    height:50px;
}

This, of course, is if I understand your question correctly...

Upvotes: 1

Related Questions