相对定位高度问题

相对定位高度问题

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

http://img1.sycdn.imooc.com//climg/5decedc4090bd86602570262.jpg

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

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

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

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

http://img1.sycdn.imooc.com//climg/5dedd66c091a172606130593.jpg

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

  • 丶浅墨 提问者 #1
    如果必须要让div2绝对定位,有什么方法可以让div2不在继承div1的高度呢
    2019-12-09 13:08:57
  • 好帮手慕小班 回复 提问者 丶浅墨 #2
    同学你好,可以直接设置div2的高度,设置后,div2的高度就是设置后的高度。如果我的回答解决了你的疑惑,请采纳!祝学习愉快!
    2019-12-09 13:34:15
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师