css中的position屬性值的探究(小結)

2024-07-11 08:59:28

字體：大中小

來源：轉載

供稿：網友

css的position屬性指定了元素的定位類型，然后通過top，botton，left，right來具體定位。

在具體定位之前必須使用position屬性，否則所有的具體定位屬性都無法生效。

position可選擇的值一共五個：static ，relative，absolute，fixed，或sticky。

下面博主將一一進行含代碼和運行結果的對比解釋

首先是不設置position屬性，可以看到two元素的top的屬性并未生效，而顏色屬性是有效的，當前位置是默認文檔流中的位置，以此為原型對比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元素的默認值，即沒有定位，元素出現在正常的流中。

靜態定位的元素不會受到 top, bottom, left, right影響。

這個值既然會使定位屬性失效，那么它存在的意義是什么的？

在網頁樣式修改的過程中，可以暫時的屏蔽某些元素的位置信息，或者在修改的時候，保留，某些部分的位置信息，便于恢復。

position：relative

相對定位，相對與原來正常文檔流的位置定位，但是在定位時不改變原來的頁面布局，既是相當于只是把定位的元素進行了移動，而移動的對比標準位置就是正常文檔流中的位置，而原來的位置會留白。

position ：absolute

絕對定位，該元素將從普通文檔流中刪除，并且不會為頁面布局中的元素創建空間。他相對于最近已定位的父元素定位。例子中即是根據body元素來定位的。

position ：fixed

固定定位，所謂固定定位和絕對定位相似，一樣都會從普通文檔流中刪除，并且不會為頁面布局中的元素創建空間；不一樣的是它是固定在視窗上的，是以視窗為定位對象的的，相信大家瀏覽很多網頁時都有這樣的感受，網頁上部或者下部會有廣告不會隨著網頁的上下滾動而移動，它們是固定在網頁上的，并且如果沒有設置z-index來修該疊放次序，它們會覆蓋網頁的內容。