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。需要定位z-index才能正常工作。请参阅jsfiddle。

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

Answer 2

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

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

<强> DEMO

Answer 3

我可以建议绝对定位吗？

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

当然，如果我正确理解你的问题......

Answer 4

您需要做的是使用z-index。根据{{3}}指定元素的堆栈顺序。请注意，您必须使div的亲属请参见代码

http://www.w3schools.com/cssref/pr_pos_z-index.asp

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

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

如何使div重叠父div

4 个答案: