css的position屬性指定了元素的定位類型，然后通過top，botton，left，right來具體定位。
在具體定位之前必須使用position屬性，否則所有的具體定位屬性都無法生效。
position可選擇的值一共五個：static ，relative，absolute，fixed，或sticky。
下面博主將一一進(jìn)行含代碼和運(yùn)行結(jié)果的對比解釋
首先是不設(shè)置position屬性，可以看到two元素的top的屬性并未生效，而顏色屬性是有效的，當(dāng)前位置是默認(rèn)文檔流中的位置，以此為原型對比position改變時的元素位置的變化。
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="./j.css"></head><body> <div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div> </div></body></html> |
| .box { display: inline-block; background: red; color: white; } #two { top: 260px; bottom: 126px; left: 20px; background: blue; } |
position：static
在#two的類下添加position：static;如下（后面每處只修改position的值）
| #two { position:static; top: 260px; bottom: 126px; left: 20px; background: blue; } |
HTML元素的默認(rèn)值，即沒有定位，元素出現(xiàn)在正常的流中。
靜態(tài)定位的元素不會受到 top, bottom, left, right影響。
這個值既然會使定位屬性失效，那么它存在的意義是什么的？
在網(wǎng)頁樣式修改的過程中，可以暫時的屏蔽某些元素的位置信息，或者在修改的時候，保留，某些部分的位置信息，便于恢復(fù)。
position：relative
相對定位，相對與原來正常文檔流的位置定位，但是在定位時不改變原來的頁面布局，既是相當(dāng)于只是把定位的元素進(jìn)行了移動，而移動的對比標(biāo)準(zhǔn)位置就是正常文檔流中的位置，而原來的位置會留白。
position ：absolute
絕對定位，該元素將從普通文檔流中刪除，并且不會為頁面布局中的元素創(chuàng)建空間。他相對于最近已定位的父元素定位。例子中即是根據(jù)body元素來定位的。
新聞熱點(diǎn)
疑難解答
圖片精選
