相对定位高度问题
<!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撑开
12
收起
正在回答
1回答
同学你好,出现div2的高度不是由div3撑开的原因是,div2设置了 position: absolute;
子元素的div脱离标准流,以1个局外人的身份去继承父盒子的高度。所以div2的高度就继承了父元素div1的高度,但是如果div2没有设置position: absolute; 子div与父div在同一个标准流时,就无法继承父元素中的高度,例如:
如果我的回答解决了你的疑惑,请采纳!祝学习愉快!
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手,到Java Web基础,前后端结合助你完成Java Web小白的蜕变!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星