相对定位高度问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>
</body>
</html>

#div1{
    width: 200px;
    height: 200px;
    background: #ff285e;
    position: relative;
}
#div3{
    width: 50px;
    height: 50px;
    background: #07cbc9;
}
#div2{
    width: 50px;
    background: black;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
}

老师，为什么div2的高度会变成div1的高度，而不是由div3撑开

丶浅墨 2019-12-08

源自：CSS定位 7-3 定位小结

收起

1回答

好帮手慕小班回答被采纳获得+3积分 2019-12-09 13:06:59

同学你好，出现div2的高度不是由div3撑开的原因是，div2设置了 position: absolute;

子元素的div脱离标准流，以1个局外人的身份去继承父盒子的高度。所以div2的高度就继承了父元素div1的高度，但是如果div2没有设置position: absolute; 子div与父div在同一个标准流时，就无法继承父元素中的高度，例如：

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

丶浅墨提问者 #1

如果必须要让div2绝对定位，有什么方法可以让div2不在继承div1的高度呢

2019-12-09 13:08:57
好帮手慕小班回复提问者丶浅墨 #2

同学你好，可以直接设置div2的高度，设置后，div2的高度就是设置后的高度。如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

2019-12-09 13:34:15