一、絕對定位參考點 1.規律： （1）預設情況下所有的絕對定位的元素，無論有沒有祖先元素，都會以body作為參考點。 <style> .box1{ width: 300px; height: 300px; background-color: red; /*position:absolute;*/ / ...
一、絕對定位參考點
1.規律：
（1）預設情況下所有的絕對定位的元素，無論有沒有祖先元素，都會以body作為參考點。
<style> .box1{ width: 300px; height: 300px; background-color: red; /*position:absolute;*/ /*left:0px;*/ /*bottom:0px;*/ } .box2{ width: 200px; height: 200px; background-color: yellow; position: absolute; left:0px; bottom:0px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div>
（2）如果有一個絕對定位的元素有祖先元素，並且祖先元素也是定位流，那麼這個絕對定位的元素就會以定位流的那個祖先元素為參考點。
.box1{
width: 300px;
height: 300px;
background-color: red;
position:absolute;
left:0px;
bottom:0px;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left:0px;
top:0px;
}
註意點：i.只要是這個絕對定位元素的祖先元素都可以。ii.指的定位流是指絕對定位/相對定位/固定定位，定位流中只有靜態定位是不行的。
（3）如果一個絕對定位的元素有祖先元素，並且祖先元素也是定位流，而且祖先元素中有多個元素都是定位流，那麼這個絕對定位的元素會以離它最近的祖先元素作為參考點。
.......上面的代碼不變.......... .box3{ width: 100px; height: 100px; background-color: black; position:absolute; right:0px; bottom:0px; } .........省略代碼....... <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div>
二、絕對定位的註意點
（1）如果一個絕對定位的元素是以body作為參考點，那麼其實是以網頁首屏的寬度和高度作為參考點的，而不是以整個網頁的寬度和高度作為參考點的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D152_LimeLightOfAbsolutePosition</title> <style> .box1{ width: 100px; height: 100px; background-color: red; position:absolute; bottom:0px; right:0px; } .box2{ width: 2000px; height: 100px; background-color: blue; position: } .box3{ width: 200px; height: 2000px; background-color: black; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
（2）一個絕對定位的元素會忽略祖先元素的padding屬性。
.box4{ height: 300px; width: 300px; background-color: yellow; padding:50px; /*position:absolute;*/ /*boder:20px black ;*/ } .box5{ height: 100px; width: 100px; background-color: red; position:absolute; left:0px; top:0px; } </style> </head> <body> <div class="box4"> <div class="box5"></div> </div>
三、源碼：
D151_ReferencePointOfAbosulotePositoning.html
D152_LimeLightOfAbsolutePosition.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D151_ReferencePointOfAbosulotePositoning.html
https://github.com/ruigege66/HTML_learning/blob/master/D152_LimeLightOfAbsolutePosition.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
