20181127——Css中的絕對定位和相對定位
阿新 • • 發佈：2018-11-28
在CSS中，所謂絕對定位指的是“相對於”已經定位的祖先元素，如果不存在已經定位的祖先元素，那麼就“相對於”最初的包含快(一般情況下為body);相對定位指的是相對於元素初始位置進行定位。
絕對定位本身與文件流無關，因此不佔空間，普通文件流中的元素的佈局就當絕對定位的元素不存時一樣，所以 它們可以覆蓋頁面上其他的元素，且可以通過z-index屬性來控制這些層的對方順序。
相對定位
相對定位比較簡單，如果在某個元素中設定了position屬性為relative,那麼該元素會相對於初始位置進行定位
相對定位不會脫離文件流(文件流表示針對窗體而言，自上而下分為多行，從而依左至右排放元素)，即當第二個盒子按照left:30px;top:40px;的設定相對移動之後，原來的位置其實是保持不變，第三個盒子不會佔用第二個盒子的原始位置。
絕對定位
絕對定位相對於上述情況，則相較於複雜一點。絕對定位需要找到設定絕對定位的元素的祖先元素，它會根據離其最近的祖先元素進行定位。
根據上圖可以明顯的看出，當第二個盒子設定為絕對定位之後，該盒子脫離文件流，並且它的原始位置已經被第三個盒子所替代。接著第二個盒子開始查詢它的“參照物”，由於白色盒子的postion屬性為預設值，於是向上層級查詢，橘色盒子position:absolute,在絕對定位中，符合祖先元素的條件(定位設定為非static),因此第二個盒子會以橘色盒子為參照物進行向左和向下移動。
有了絕對定位和相對定位，top和left才能起作用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0px; padding:0px } #div1{ width:2000px; height: 400px; background-color: orange; } #div2{ margin:10px; width: 200px; height: 200px; float:left; background-color: blue; } #div3{ position: absolute; left:60px; top:40px; margin:10px; width: 200px; height: 200px; float:left; background-color: red; } #div4{ margin:10px; width: 200px; height: 200px; float:left; background-color: yellow; } </style> </head> <body> <div id="div1"> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </div> </body> </html>
自己編寫的程式碼如下