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

最新推荐文章于 2024-09-11 13:52:07 发布

原创最新推荐文章于 2024-09-11 13:52:07 发布 · 9.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

HTML与CSS学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了在网页布局中，如何正确使用绝对定位和相对定位，以确保子元素始终处于父元素框内。通过调整CSS属性，解决了子元素溢出父元素边界的问题，实现了精确的页面布局。

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

<!--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>