绝对定位超出父元素的解决办法

绝对定位超出父元素的解决办法

<!--html部分-->

<div class = "div1">
    <div class = "div2">
    </div>
</div>


<style>
    *
    {
        margin : 0;
        padding : 0;
    }
    
	.div1
    {
        border:1px red solid;/*加边框方便显示*/
        width:400px;
        height:400px;
        margin:100px auto;
    }
    
    .div2
    {
        border:1px yellow solid;
        width:200px;
        height:200px;
        position:absolute;
        left:100px;
        top:100px;
    }
    
</style>

​ 本来预期div2在div1中，div1为div2的父元素，但是实际上，div1位于屏幕中间，div2距离整个页面空白（body范围）左上角左偏100px，上偏100px；没有处于div1中。

解决办法：

给父元素使用相对定位，就能确保子元素框始终处于父元素框内

<!--html部分-->

<div class = "div1">
    <div class = "div2">
    </div>
</div>


<style>
    *
    {
        margin : 0;
        padding : 0;
    }
    
	.div1
    {
        border:1px red solid;/*加边框方便显示*/
        width:400px;
        height:400px;
        margin:100px auto;
        position:relative;
    }
    
    .div2
    {
        border:1px yellow solid;
        width:200px;
        height:200px;
        position:absolute;
        left:100px;
        top:100px;
    }
    
</style>