父元素无定位时到底以谁为参考系 对子元素绝对定位？
来源：2-2 选择练习
慕少4337290
2019-10-21 17:13:22
父元素无定位时到底以谁为参考系对子元素绝对定位？我看了这道题的四个问答。有老师说是以body为参考系，也有老师说是以HTML底层元素。我试着把body 的外距margin设为10，但子元素并不是以body的border左上角为参考系的（如图）而是以HTML的00点吧？那就是说 body的position 默认值并不是static吗？
另外就是， 我把body的背景色设为yellow ，为什么body的border以外的地方也会被填充为黄色（如图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#par1{
width: 300px;
height: 300px;
background-color: red;
/*margin: -40px;*/
padding: 30px;
/*float: left;*/
text-align: right;
}
#par2{
width: 600px;
height: 600px;
background-color: orange;
/*margin: -40px;*/
padding: 30px;
/*float: left;*/
/*position: absolute;*/
text-align: right;
}
#son1{
width: 100px;
height: 100px;
background-color: blue;
font-size: 20px;
position: absolute;
top: 0px;
left: 0px;
text-align: right;
}
#son2{
width: 210px;
height: 210px;
background-color: pink;
/*text-align: right;*/
font-size: 50px;
}
body{
background-color: yellow;
margin: 10px;
padding: 0px;
}
</style>
</head>
<body>
<div id="par1">
i'm par1
<div id="son1">i'm son1</div>
<div id="son2">i'm son2</div>
</div>
<div id="par2">i'm par2</div>
</body>
</html>）？
写回答
1回答
-
同学你好。
1、经试验，元素并不是以body的border左上角为参考系的而是以HTML的00点为参考系的。同学说的没有错。是我说错了呢~这里老师跟你道歉，也感谢同学帮我纠正了我思维中的误区呢~之后也会去修改一下之前答案~ 这个问题本身和浏览器的用户代理有关，但经测试，所有主流浏览器都是以html为准的。但同学可以 以html为准来记忆。
2、默认情况下，给body设置背景颜色，相当于给html和body统一设为一个颜色。这其实是CSS在设计时为了方便考虑的。如果要单独显示出不同的颜色，需要给html设置颜色。
html{ background-color: green; }显示效果如下：
如果解答了同学的疑问，望采纳~
祝学习愉快~
0
相似问题