html - 如何使div覆盖父div

Question

粉色和绿色布局是父布局。单击灰色布局时，将创建蓝色布局。我希望蓝色布局覆盖父布局（粉红色和绿色）并位于顶部。

但是蓝色布局被粉红色布局覆盖。我需要帮助。

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> 

检查JSFiddle

Answer 1

添加一些定位和z-index ...

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

演示

Answer 2

您需要调整z-index。z-index 需要定位才能正常工作。见jsfiddle。

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

Answer 3

我可以建议绝对定位吗？

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

当然，这是如果我正确理解您的问题...

Answer 4

您需要做的是使用 z-index。根据http://www.w3schools.com/cssref/pr_pos_z-index.asp指定一个元素的堆栈顺序。请注意，您必须将 div 设为相对请参阅代码

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;
}

如果这回答了你的问题，请告诉我！