为了账号安全,请及时绑定邮箱和手机立即绑定

如果不存在这样的包含块,则相对于body元素,不是相对于html 元素?

如题:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>absolute样式</title>
<style type="text/css">
body{border:1px solid green;height:500px;}
div{
    width:200px;
    height:200px;
	border:2px red solid;
	position:absolute;
    top:0;
    left:0;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

上面这段代码可以看出,红框已超出绿框的范围?

正在回答

1 回答

你是相对于整个页面进行了绝对定位,所以会出现这样的情况

0 回复 有任何疑惑可以回复我~
#1

Issa_Tan 提问者

可能我问得不是很清楚,我的意思是“如果页面上并没有设置position:relative;的元素,那么到底是相对于body 元素定位?还是相对于html 元素定位?”
2015-03-18 回复 有任何疑惑可以回复我~
#2

爱吃寿司的小豆芽 回复 Issa_Tan 提问者

body{border:1px solid green;height:500px;margin:0px;padding:0px},此时的body和浏览器窗口距离为(margin:0px;padding:0px)0,absolute定位可以同时对浏览器窗口和body而言;
2015-03-25 回复 有任何疑惑可以回复我~
#3

爱吃寿司的小豆芽 回复 Issa_Tan 提问者

可以这样理解,1)relative是相对前一个有定位属性的<body>而言;2)absolute是相对于浏览器而言,一般浏览器与body的间距不为0。只有当你上述编写程序第七行扩充为body{border:1px solid green;height:500px;margin:0px;padding:0px},此时的body和浏览器窗口距离为(margin:0px;padding:0px)0px,absolute定位可以同时对浏览器窗口和body而言;
2015-03-25 回复 有任何疑惑可以回复我~
#4

Issa_Tan 提问者 回复 爱吃寿司的小豆芽

你好,主要是因为我看了《HTML+CSS基础课程 12-6》这门课(href = "http://www.imooc.com/code/2073"),它里面说,如果不存在设置 position:relative 的元素,则相对于body元素,即相对于浏览器窗口 进行定位。在我的实验中,我想说明是它这句话是错误的,应该是相对于整个DOM 树的最顶端,即<html> 元素定位而不是 <body> 元素。
2015-03-30 回复 有任何疑惑可以回复我~
#5

慕尼黑7014727 回复 Issa_Tan 提问者

说的很对!其实是相对于html元素定位的。感谢!
2017-05-03 回复 有任何疑惑可以回复我~
查看2条回复

举报

0/150
提交
取消

如果不存在这样的包含块,则相对于body元素,不是相对于html 元素?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信