絕對定位
阿新 • • 發佈：2020-08-20
position 的值為 absolute 時，就是開啟了絕對定位。
元素設定絕對定位以後，如果不設定偏移量，元素的位置不會發生變化。
絕對定位的元素是相對於距離他最近的祖先元素進行定位，如果所有的祖先元素都沒有開啟定位，則相對於瀏覽器視窗進行定位。
絕對定位的元素會完全脫離文件流。
絕對定位會改變元素的性質。內聯變塊，塊的高度和寬度都被內容撐開，並且不獨佔一行。
絕對定位會使元素提升一個層級。
例子
未設定絕對定位時
<!DOCTYPE html> <html> <head> <meta charset="utf-8"View Code> <style> body{ margin: 50px; } #main{ width: 400px; height: 150px; background-color: red; } #box1{ width: 50px; height: 50px; background-color: pink; } #box2{ width: 50px; height: 50px; background-color: yellow; } #box3{ width: 100px; height: 50px; background-color: blue; } #box4{ width: 50px; height: 50px; background-color: purple; } </style> </head> <body> <div id="main"> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3"> <div id="box4"> box4 </div> </div> </div> </body> </html>
絕對定位的元素是相對於距離他最近的祖先元素進行定位，如果所有的祖先元素都沒有開啟定位，則相對於瀏覽器視窗進行定位。
在上面程式碼的基礎上，在樣式 box4 上開啟絕對定位，設定偏移量為 left: 200px。因為盒子 box4 的所有祖先元素都沒有開啟定位，所以盒子相對瀏覽器視窗定位，因為設定了 left: 200px，所以只改變盒子左邊邊到瀏覽器的距離，設定之後，瀏覽器在盒子左邊邊的左 200px 處。
如果祖先元素開啟了定位，則相對祖先元素進行定位。下面在盒子 box4 上開啟絕對定位，在盒子 box4 的祖先元素之一盒子 box3 上開啟相對定位，在盒子 box4 上設定偏移量，則盒子 box4 相對 box3 定位。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body{ margin: 50px; } #main{ width: 400px; height: 150px; background-color: red; /* 相對定位 */ position: relative; } #box1{ width: 50px; height: 50px; background-color: pink; } #box2{ width: 50px; height: 50px; background-color: yellow; } #box3{ width: 100px; height: 50px; background-color: blue; } #box4{ width: 50px; height: 50px; background-color: purple; /* 絕對定位 */ position: absolute; /* 偏移 */ right: 50px; bottom: 50px; } </style> </head> <body> <div id="main"> <div id="box1">box1</div> <div id="box2">box2</div> <div id="box3"> <div id="box4"> box4 </div> </div> </div> </body> </html>View Code
如果想要相對別的祖先元素定位，就在別的祖先元素上開啟定位。這裡在 main 盒子上開啟相對定位，則盒子 box4 相對盒子 main 定位。