當子元素的position是：absolute時候的深度分析

2019-11-09 18:58:29

字體：大中小

來源：轉載

供稿：網友

自己自學前端不久，遇到很多問題。特別是CSS中的position，著實讓我頭疼。自己看了一些視頻，一些書籍，也慢慢對position有了一定了解。很多關于css的文章，都講到當子元素是position時候，絕對定位以窗口可視區為參照，可是當我敲代碼的時候，出現了問題。現在總結如下： 第一種情況（子元素以可視窗口為參照點） 1：static(最近祖先元素)——>static(父元素) ——>absolute(子元素)

這里寫代碼片 <html> <style type="text/css"> html{祖先元素 border: 1px solid blue; margin: 20px 0 0 30px; position: static; } body{父元素 border: 1px solid red; height: 100px; position: static; } #aas{子元素 height: 20px; width: 30px; background: brown; left: 0px; bottom: 0px; position: static; } </style></head><body> <div id="aas"> </div></body></html>

這里寫圖片描述 第二種情況（子元素以最近祖先元素為參照點） 2：relative或absolute(最近祖先元素)——>static(父元素) ——>absolute(子元素)

這里寫代碼片<html><style type="text/css"> html{祖先元素 border: 1px solid blue; margin: 20px 0 0 30px; position: relative或absolute; } body{父元素 border: 1px solid red; height: 400px; position: static; } #aas{子元素 height: 100px; width: 100px; background: brown; left: 0px; bottom: 0px; position: absolute; } </style></head><body> <div id="aas"> </div></body>

這里寫圖片描述 第三種情況（子元素以最近父元素為參照點） 2：**非**static或absolute或relative(最近祖先元素)——>非static(父元素) ——>absolute(子元素)

這里寫代碼片<html><style type="text/css"> html{祖先元素 border: 1px solid blue; margin: 20px 0 0 30px; position: relative或relative或static; } body{父元素 border: 1px solid red; height: 400px; position: relative或absolute; } #aas{子元素 height: 100px; width: 100px; background: brown; left: 0px; bottom: 0px; position: absolute; } </style></head> <body> <div id="aas"> </div></body>

這里寫圖片描述