position和float
position
position有四個值:static(預設),relative,absolute,fixed
postion 可以繼承
普通文件流就是根據元素是行內元素 還是塊級元素依次排列顯示。
position不同的取值主要體現在元素是否脫離文件流
和是否改變行內元素的display屬性值
兩個方面
下面是一個普通文件流:各元素按照順序依次排列,每個元素都有一個“預設位置”
.a,.b,.c{ width:150px; height: 100px; } .a{ background-color: red; } .b{ background-color: green; } .c{ background-color: yellow; }ABC
原始圖
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.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;*/ }WRAPPERBBBB
原始圖
放開.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,相對於最近的定位元素定位
結論
塊狀元素在position(relative/static)的情況下width為100%,但是設定了position: absolute之後,width變成auto(會受到父元素的寬度影響)
元素設定了position: absolute之後,如果沒有設定top、bottom、left、right屬性的話,瀏覽器會預設設定成auto,而auto的值則是該元素的“預設位置”,也就是隻設定absolute,還是在預設位置
如果定位元素的父元素都沒有設定絕對或者相對定位,那麼該元素就根據根元素定位
如果定位元素的父元素有絕對或者相對定位,那麼就相對最近的定位父元素定位
position:absolute的行內元素會改變display,變為塊級元素
覆蓋其他非定位元素
脫離文件流
驗證絕對定位會脫離文件流
此時BBBB元素未定位,正常的文件流中
BODY.a{ width: 100px; height: 100px; background-color: #ccc; }WRAPPERBBBBAAAA
普通文件流
BBBB絕對定位之後
可以看到,當BBBB絕對定位後,AAAA跑到BBBB的位置去了,說明BBBB在文件流中脫離了
position:fixed
與position:absolute的相同點
行內元素的display會變為block
覆蓋到非定位元素上
脫離文件流
區別:
絕對定位的根元素可以被設定,可以是根元素也可以是已經定位的父元素;而固定定位只能根據根元素定位,當視窗改變時,元素和視窗的距離是不變的。
float:left|right|none
只能橫向浮動,不能縱向浮動
元素設定float後,會脫離文件流,父元素高度塌陷
元素的display變為block
浮動元素的後一個元素會圍繞著該浮動元素,文字圍繞 圖片。可以給後一個元素新增overflow:hidden ,使之成為BFC,這樣就不會圍繞浮動元素了。參見
浮動元素不會遮蓋後一個元素;而position定位後,定位元素有可能會遮蓋住非定位元素
浮動元素的前一個元素不會受影響,如果希望兩個塊元素並排顯示,必須 兩個都設定浮動
float和position同時使用時
relative和float和top|left|right|bottom 同時使用時,先浮動到一定位置,再進行相對定位
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
只能橫向浮動,不能縱向浮動
脫離文件流,父元素高度塌陷
元素的display變為block
浮動元素的後一個元素會圍繞著該浮動元素
浮動元素不會遮蓋後一個元素
浮動元素的前一個元素不會受影響,如果希望兩個塊元素並排顯示,必須 兩個都設定浮動
作者:椰果粒
連結:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/3705/viewspace-2814135/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- web前端css定位position和起浮floatWeb前端CSS
- float與position的使用
- CSS之float vs position:absoluteCSS
- css系列之position與floatCSS
- 有關float、position:absolute及a元素
- CSS 中的 float、BFC、position 和 inline-blockCSSinlineBloC
- CSS中Position、Float屬性深入探討CSS
- css定位中position:absolute與float的區別CSS
- position:absolute和float隱式改變display為inline-blockinlineBloC
- dispaly、position、float之間的關係與相互作用
- position和BFC
- CSS中float和Clear的使用CSS
- CSS position fixed和absolute區別CSS
- jQuery offset()和position()用法詳解jQuery
- html中Position屬性值介紹和position屬性四種用法HTML
- float和double有什麼區別?
- position
- css 盒子模型和position總結CSS模型
- Float型別*100的坑 (BigDecimal 的使用)和float形的格式化型別Decimal
- CSS中的float和margin的混合使用CSS
- CSS position:sticky與position:fixed 區別CSS
- Position定位
- css positionCSS
- jQuery position()jQuery
- python中分辨int和float的差別Python
- float型別最大值和最小值型別
- CSS3 object-fit 和 object-positionCSSS3Object
- 解析position: sticky;
- CSS之positionCSS
- jQuery position()方法jQuery
- 當使用 position 屬性時,請始終設定 !DOCTYPE 宣告:當使用 float 屬性時,請始終設定 !DOCTYPE 宣告:
- jquery position()函式和offset()函式的區別jQuery函式
- CSS float浮動CSS
- CSS float 浮動CSS
- CSS浮動(float)CSS
- float datatype in Oracle databaseOracleDatabase
- 關於MYSQL中FLOAT和DOUBLE型別的儲存MySql型別
- list-style-position