css 絕對定位和相對定位
阿新 • • 發佈：2018-12-20
絕對定位
絕對定位值的是通過規定HTML元素在水平和垂直方向上的位置來固定元素，基於絕對定位的元素不佔據空間。
絕對定位的位置宣告是相對於已定位的並且包含關係最近的祖先元素。如果當前需要被定位的元素沒有已定位的祖先元素做參考值，則相對於整個網頁。
例項1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素定位例項</title> <style> p { position: absolute; width: 120px; height: 120px; top: 100px; left: 0px; background-color: #c8edff; } div { position: absolute; width: 300px; height: 300px; top: 80px; left: 180px; border: 1px solid; } </style> </head> <body> <h3>css絕對定位的應用</h3> <hr> <p>該段落是相對於頁面定位，距離頁面的頂部100畫素，距離左邊0畫素</p> <div>我是相對於頁面定位的div元素，距離頂端80畫素，距離左邊180畫素 <p>該段落是相對於父元素div定位的，距離div元素的頂端100畫素，距離div元素的左邊0畫素</p> </div> </body> </html>
頁面效果：
本例項包含兩個樣式完全相同的段落元素<p>，用於對比測試直接在頁面中使用和嵌入已定位的<div>元素中兩種情況。
相對定位
相對定位與絕對定位的區別在於它的參照點不是左上角的原點，而是該元素本身原先的起點位置。並且即使該元素偏移到了新的位置，也仍然從原始的起點處佔據空間。
例項2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素定位例項</title> <style> div { width: 200px; height: 380px; border: 1px solid; margin-left: 50px; } p { width: 150px; height: 100px; background-color: #c8edff; } .left { position: relative; left: -50px; } .right { position: relative; left: 130px; } </style> </head> <body> <h3>css相對定位的應用</h3> <hr> <p>正常段落的狀態</p> <p class="left">相對自己的正常位置向左偏移了50畫素</p> <p class="right">相對自己的正常位置向右偏移了130畫素</p> </body> </html>
頁面效果：
本例項包含了三個樣式相同的段落元素<p>，用於對比測試相對定位的效果，並聲明瞭一個帶有實線邊框效果的<div>元素包含這三個段落元素，以便對比段落元素的偏移量。