亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

如果不存在這樣的包含塊,則相對于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.xianlaiwan.cn/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下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號