关于子元素的absolute定位

最新推荐文章于 2023-08-17 22:02:13 发布

原创最新推荐文章于 2023-08-17 22:02:13 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

9 篇文章

订阅专栏

本文探讨了如何使用CSS将子元素（如div2）在父元素（div1）内实现底部居中。关键在于理解position:absolute定位原理，当祖先元素没有设置position: relative/absolute/fixed时，元素会根据初始包含块定位。通过实例代码展示了不同情况下，如何调整body、html和div的样式以达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于子元素（如div）在父元素（如div）中的定位问题：

假设现有html代码如下

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

想让div2在div1中实现底部居中的效果，查找资料发现关键步骤（CSS）是

div
{
        width: 100px;
        height: 100px;
        position: relative; 
}
.div2
{
    position: absolute;
    left: 50%;
    bottom: 20px; /*按需要从底部上移*/
}

在一篇文章看到以下内容，解释得很清楚

position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素（包含块）定位，如果没有这样的祖先元素，则以初始包含块进行定位，而初始包含块并不是以或进行定位的。

w3c关于包含块及初始包含块的定义

测试如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position:absolute</title>
</head>
<style type="text/css">
    html{
        border: 1px solid red;
        background-color: #ee8;
    }
    body{
        width:300px;
        height: 200px;
        margin: 10px auto;
        background-color: #ccc;
        border: 1px solid blue;
    }
    div{
        width: 100px;
        height: 100px;
        background-color: #3ff;
        position: absolute;
    }
</style>
<body>body
    <div>div</div>
</body>
</html>