float與position同時使用
阿新 • • 發佈:2019-01-06
float浮動與position同時使用並不會衝突,前者是使元素脫離標準流,浮動在文件流上;而後者是使元素相對自身的移動定位,雖浮動但佔據原有位置。當兩者同時使用時,不會發生衝突,反而使元素同時具有兩者特性,即既可以相對自身移動定位,又可以浮動不佔位置。
<style> * { margin: 0; padding: 0; } .nav { margin: 100px; height: 200px; width: 300px; border: 1px solid red; } .banner { float: left; height: 50px; width: 50px; position: relative; background-color: red; } .header { float: left; height: 50px; width: 50px; background-color: yellow; } </style> </head> <body> <div class="nav"> <div class="banner"></div> <div class="header"></div> </div> </body>
如程式碼所示,此時的效果為:
當設定邊偏移時,效果如下:
.banner {
float: left;
height: 50px;
width: 50px;
position: relative;
left: 100px;
background-color: red;
}
???疑問,雖然邊偏移有效,但為什麼黃色的盒子沒有因為float:left到最左邊呢??
--------------------------------------------------------------------------------------------
因為relative是要保留原本的位置的啊!!!
為了搞清楚原因,做以下測試:
.header {
float: right;
height: 50px;
width: 50px;
background-color: yellow;
}
把黃色的float改成right,效果如下,其確實浮到了最右邊:
再測試,這次修改結構,把黃色的div改到紅色的div前面(或者刪掉黃色盒子的浮動)(再或者給其加一個定位absolute),效果如下,黃色的也浮到了最左邊:
<div class="nav"> <div class="header"></div> <div class="banner"></div> </div>