position和float

position

position有四個值：static（預設），relative，absolute，fixed
postion 可以繼承

普通文件流就是根據元素是行內元素 還是塊級元素依次排列顯示。

position不同的取值主要體現在元素是否脫離文件流和是否改變行內元素的display屬性值兩個方面

下面是一個普通文件流：各元素按照順序依次排列，每個元素都有一個“預設位置”

    
A
    
B
    
C
.a,.b,.c{
    width:150px;
    height: 100px;
}
.a{
    background-color: red;
}
.b{
    background-color: green;
}
.c{
    background-color: yellow;
}

原始圖

position:static
是預設的方式，所有元素在預設情況下都是static

position:relative
相對定位，相對於原來該元素在普通流中的位置重新定位，依舊在普通流中佔據位置，沒有脫離普通流，只是視覺上發生變化

.b{    background-color: green;    position: relative;    top: 50px;    left: 100px;
}

相對定位

相對定位不會使行內元素的display發生變化

DDDDD
.d{
    background-color: gold;
    position: relative;
    top: 50px;
    left: 100px;    
    width: 300px;
}

相對定位，行內元素

從上圖中可見，.d沒有設定上寬 ，所以相對定位並沒有改變行內元素的display屬性值

position:absolute
絕對定位：如果他的父元素都沒有設定postion:relative|absolute，就根據根定位；否則根據設定了relative|absolute的父元素定位；絕對定位元素脫離文件流，並使塊級元素的寬變為自適應（auto），元素的位置與文件流無關，也不佔據文件空間。位置是相對於它最近的非static祖先元素的位置決定的。

BODY    
WRAPPER        
BBBB
    
      
.body{
    height: 300px;
    background-color: blue;
}
.wrapper{
    background-color: red;
    height: 200px;
}
.a,.b,.c{
    height: 100px;
}

.b{
    background-color: green;
/*  position: absolute;
    top: 200px;
    left: 200px;*/
}

原始圖

放開.b的註釋後，因為.b絕對定位，其餘元素無定位，則.b相對於整個頁面的根標籤定位，BBBB寬度自適應

我們可以看到這裡BBBB距離BODY最底邊有一定的距離，是因為他相對於根定位，而

給.wrapper新增postion:relative後，就相對.wrapper定位了，BBBB本身寬度自適應

給.wrapper新增postion:absolute後，相對.wrapper定位，且WRAPPER和BBBB本身寬度自適應

給.body新增postion:relative後，相對.body定位，且BBBB本身寬度自適應

給.body新增postion:absolute後，相對.body定位，且BBBB,WRAPPER,BODY寬度自適應

body  wrapper 均為relative，則相對於最近的元素定位

BODY  WRAPPER均為absolute，則都寬度自適應，相對於最近的元素定位

BODY是relative ， WRAPPER是absolute，相對於最近的元素定位

BODY是absolute ，WRAPPER是relative，相對於最近的定位元素定位

結論

1. 塊狀元素在position(relative/static)的情況下width為100%，但是設定了position: absolute之後，width變成auto（會受到父元素的寬度影響）

2. 元素設定了position: absolute之後，如果沒有設定top、bottom、left、right屬性的話，瀏覽器會預設設定成auto，而auto的值則是該元素的“預設位置”，也就是隻設定absolute，還是在預設位置

3. 如果定位元素的父元素都沒有設定絕對或者相對定位，那麼該元素就根據根元素定位

4. 如果定位元素的父元素有絕對或者相對定位，那麼就相對最近的定位父元素定位

5. position:absolute的行內元素會改變display，變為塊級元素

6. 覆蓋其他非定位元素

7. 脫離文件流

驗證絕對定位會脫離文件流
此時BBBB元素未定位，正常的文件流中

BODY    
WRAPPER        
BBBB
        
AAAA
    
      
  .a{
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

普通文件流

BBBB絕對定位之後

可以看到，當BBBB絕對定位後，AAAA跑到BBBB的位置去了，說明BBBB在文件流中脫離了

position:fixed
與position:absolute的相同點

1. 行內元素的display會變為block

2. 覆蓋到非定位元素上

3. 脫離文件流

區別：
絕對定位的根元素可以被設定，可以是根元素也可以是已經定位的父元素；而固定定位只能根據根元素定位，當視窗改變時，元素和視窗的距離是不變的。

float：left|right|none

1. 只能橫向浮動，不能縱向浮動

2. 元素設定float後，會脫離文件流，父元素高度塌陷

3. 元素的display變為block

4. 浮動元素的後一個元素會圍繞著該浮動元素，文字圍繞 圖片。可以給後一個元素新增overflow:hidden ，使之成為BFC，這樣就不會圍繞浮動元素了。參見

5. 浮動元素不會遮蓋後一個元素；而position定位後，定位元素有可能會遮蓋住非定位元素

6. 浮動元素的前一個元素不會受影響，如果希望兩個塊元素並排顯示，必須 兩個都設定浮動

float和position同時使用時

1. relative和float和top|left|right|bottom 同時使用時，先浮動到一定位置，再進行相對定位

2. absolute和float和top 同時使用時，float失效

只設定float和relative時，沒有top和left

float和relative

.wrapper{    background-color: red;    height: 200px;    float: right;    position: relative;
}

top=-100px, left=-100px

.wrapper{    background-color: red;    height: 200px;    float: right;    position: relative;    top: 100px;    left: 100px;
}

top left

設定position為absolute後，float失效，並沒有浮動到右邊

.wrapper{    background-color: red;    height: 200px;    float: right;    position: absolute;    top: 100px;    left: 100px;
}

absolute float

總結

position:relative
相對定位，相對於原來該元素在普通流中的位置重新定位，依舊在普通流中佔據位置，沒有脫離普通流，只是視覺上發生變化，覆蓋到其他非定位元素上。
position:absolute
絕對定位：如果他的父元素都沒有設定postion:relative|absolute，就根據根定位；否則根據設定了relative|absolute的最近的父元素定位；絕對定位元素脫離文件流，並使塊級元素的寬變為自適應（auto），行內元素變為塊級元素，覆蓋到其他非定位元素上。
position:fixed
行內元素的display會變為block，覆蓋到非定位元素上， 脫離文件流，固定定位只能根據根元素定位，當視窗改變時，元素和視窗的距離不變。
float：left|right|none

1. 只能橫向浮動，不能縱向浮動

2. 脫離文件流，父元素高度塌陷

3. 元素的display變為block

4. 浮動元素的後一個元素會圍繞著該浮動元素

5. 浮動元素不會遮蓋後一個元素

6. 浮動元素的前一個元素不會受影響，如果希望兩個塊元素並排顯示，必須 兩個都設定浮動

作者：椰果粒
連結：