關於position的一些理解

jiangjie1105發表於2019-09-17

關於position定位的一些理解

定位: 目的-------佈局

步驟：

1.第一步：通過position屬性設定定位元素相對於誰進行定位（找個參照物）
2.第二步：通過設定left right top bottom屬性，確定定位元素距離，參考元素的位置。

優先順序：

left>right
top>bottom

position屬性值：

1.static(預設值）靜態定位，無參照物，不會進行定位，物件遵循標準文件流

2.relative(相對定位)於當前標籤沒有移動之前的位置為參照物進行定位，不會將對應的標籤從文件中脫離出來（不會脫離文件流）同時可通過z-index定義層疊關係。

3.absolute(絕對定位)；已定位父元素為參照進行定位，並且已定位父元素的屬性值必須為relative，absolute或者fixed 如果父級標籤中沒有定位，最終標籤會以document為參照進行定位，元素設定absolute之後，會從父元素中脫離出來（脫離文件流），提升層級同時可通過z-index定義層疊關係。

fixed（固定定位）：以瀏覽器視窗為參照物進行定位，也會讓當前元素從文件流中脫離出來（脫離文件流），同時可通過z-index定義層疊關係。

下面先說一下什麼是標準文件流：

1.標準文件流定義 在web頁面製作，是個"流",文件流指的是元素排版佈局過程中元素會自動從左往右，自上而下的流式佈局

2.標準文件流的微觀現象

1.空白摺疊現象：比如：我們如果想讓img標籤之間沒有空隙，必須緊密連線

<img src="img/00.jpg"/><img src="img/02.jpg"/>
複製程式碼

2.高矮不齊，底邊對齊
3.自動換行，一行寫不滿，換行寫

3.標準文件流等級

標準文件流等級森嚴，分為兩種等級：塊級元素和行內元素

塊級元素特點：

1.霸佔一行，不能與其他任何元素並列

2.能接受寬高設定

3.如果不設定寬度，那麼預設寬度將變為父親的100%，即和父親一樣寬

行內元素特點：

1.與其他行內元素並排

2.不能設定寬高，預設寬度就是文字的寬度

文字級標籤：p、span、a、b、i、u、em

容器級標籤：div、h系列標籤、li、dt、dd

除了p以外，所有文字級標籤都是行內元素，所有容器級標籤都是塊級元素

HTML文件中的元素可以分為兩大類：行內元素和塊級元素。 1.行內元素，是DOM樹中的一個節點。不佔據單獨的空間，依附於塊級元素，行內元素沒有自己的區域。

2.塊級元素，是DOM樹中的一個節點。總是以塊的形式表現出來，並且跟同級的兄弟塊依次豎直排列，左右自動伸展，直到包含它的元素的邊界，在水平方向不能並排。

盒子在標準流中的定位原則： margin控制的是盒子與盒子之間的距離，padding存在於盒子的內部它不涉及與其他盒子之間的關係和相互影響問題，因此要精確控制盒子的位置，就必須對margin有更深入的瞭解。（1）行內元素之間的水平margin 當兩個行內元素緊鄰時，它們之間的距離為第一個元素的右margin加上第二元素的左margin。（2）塊級元素之間的豎直margin 兩個豎直排列的塊級元素，它們之間的垂直距離不是上邊的第一個元素的下margin和第二個元素的上margin的總和，而是兩者中的較大者。這在實際製作網頁的時候要特別注意。（3）巢狀盒子之間的margin 這時子塊的margin以父塊的content為參考進行排列。（4）margin設為負值會使設為負數的塊向相反的方向移動，甚至會覆蓋在另外的塊上 **

4.脫離文件流的方法

css一共有三種方法讓一個元素脫離文件流

1.浮動（float）
2.絕對定位（absolute）
3.相對定位（relative）

說完了標準文件流，我們回到關於position定位的問題

- 1.static

預設的position值，無特殊定位，遵循標準文件流

- 2.relative（相對定位）

由上圖可見，relative是該物件處於標準文件流中的位置一句left top 進行定位（本例中使用left和top 當然也可以用right bottom ）這些屬性並不改變物件原本在文件流中的佔位空間

由上圖可見，當設定了margin屬性時，該物件在標準文件流中的佔維空間也隨之改變。同理。padding也會改變相對定位的物件在標準文件流的佔維空間如下圖

- 3.absolute（絕對定位）

由上圖可見，絕對定位脫離標準文件流，相對於static定位以外的第一個父元素，使用left，top（或right，bottom進行絕對定位，在使用absolute定位時，必須指定left，top，bottom，right中的至少一個，否則這些屬性會使用他們的預設值auto，這將導致物件遵從標準文件流，在前一個物件之後立刻被呈遞，簡單講就是都變成relative，會佔用文件空間）

如果同時設定了left/right屬性那麼left生效，同理同時設定了top bottpm ，top生效