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>
