position總結

Position總結

關於position我目前能想到的知識點：

Position:absolute(絕對定位):

問題

1. absolute相對於誰定位？
2. absolute是否脫離文檔流？什麼狀況下不會脫離？
3. absolute的百分比表示(left:50%...)是基於誰的？
4. absolute是否能夠和float(浮動)共用？
5. absolute與margin/padding 之間互相的影響？
6. Absolute定位後是什麼類型的元素

解答

1.        生成絕對定位的元素至關於static定位(默認值，就是不定位)之外的第一個父元素進行定位
2.        咱們在給元素添加position：absolute；屬性時它是不會脫離文檔流的，而咱們一旦經過’left’,’top’,’right’,’bottom’,來給元素調整位置的時候它便會脫離文檔流

對於這個問題有測試了幾回，發現只要設置了position：absolute就脫離文檔流

　　3.       基於static之外的第一個父元素的寬度(width)或者高度(height)進行計算，若是這個定位的元素上一級父元素就是body，那麼這個元素的百分比基於屏幕的可視寬度或者高度進行計算(不是基於body定位啊，除非body是static之外的定位)

　　4.       absolute是不能和float(浮動)共用的，若是一個元素同時有position:absolute；和float:left那麼position優先級會高於float

　　5.     　首先來講absolute和margin之間的聯繫

這麼一個結構，box父元素並相對定位，son子元素絕對定位，並且有一個margin-left：20px，那麼若是我在給這個元素添加一個left：20px;這個元素依然會向右邊移動20px,說明absolute在定位的時候是吧margin算進來的(不會重疊)

 

再來講padding與absolute，padding會把整個盒子稱大，absolute在計算的時依然會把padding算進在box內

　　6．元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框(因爲float也是脫離文檔流，因此也會造成塊級)

　　Position:relative(相對定位):

1. relative相對於誰定位？
2. relative是否脫離文檔流？什麼狀況下不會脫離？
3. relative的百分比表示(left:50%...)是基於誰的？
4. relative是否能夠和float(浮動)共用？
5. relative與margin/padding 之間互相的影響？

基本也是這五個問題

1. relative相對於本身定位

 

　　2.relative是不會脫離文檔流的

　　3.這個百分比基於其父元素的width或者height計算的,無論父元素有沒有定位，因此說若是這個元素的父元素就是body，而body沒有設定高度，那麼此時的百分比是不起做用的

　　4.能共用，兩個屬性都會起做用(估計是用了relative屬性的元素沒有脫離文檔流，因此float會起做用)

　　5.同absolute ，會把margin，padding算進box中，不會疊加，跟absolute相同

Position:fixed(固定定位):