絕對定位、固定定位、相對定位分別和浮動使用的影響
阿新 • • 發佈：2021-02-05
今天我們講一下 一個盒子使用絕對定位和浮動會有什麼影響。
當一個盒子在另一個盒子的下邊重疊，那麼就會想到定位，這時就要想，是要使用絕對定位和相對定位。效果如圖一：
下面分為三種情況
- 如果使用絕對定位，和浮動的效果，如圖二
咱們看一下程式碼：
<style>
.box1 {
width: 100%;
height: 50px;
}
.box1 div {
float: left;
}
.box2 {
width 我給第二個盒子添加了絕對定位和浮動，浮動並沒有起到作用。
因為絕對定位會脫標，由於沒有給父盒子加相對定位，所以是由瀏覽器的視窗為準偏移。
所以如果想要如上圖一的效果，第二個盒子的子盒子都要進行絕對定位的偏移。
-
如果使用固定定位，和浮動的效果，那麼效果和第一種情況一樣，fixed也會使元素進行脫標，新增浮動並不會有影響。
-
如果使用相對定位定位，和浮動的效果
效果就和圖一的一樣啦~所以使用浮動和相對定位，浮動就會有效果。
相關程式碼展示：
<style>
* {
margin: 0;
padding: 0;
}
/*本次佈局使用的是流式佈局*/
.box1,
.box2 {
width: 100%;
height: 50px; 原因：相對定位是根據自己自身的位置移動，他會保留原來的位置，就是不會脫標，並且對其他元素不會有影響。如果是想要後面的盒子往上移動，那麼就可以使用margin-top或者其他方法進行移動。
總結：
- 絕對定位、固定定位分別和浮動一起使用，浮動就會不起作用
- 相對定位和浮動一起使用，浮動就會有效果
- 當然，之前在定位的文章裡面提到過，浮動、絕對定位、固定定位元素的都不會觸發外邊距合併的問題。
如果想要科普一下定位的相關知識，童稚們可以在我之前的文章裡面查詢哦，如果有什麼異議，可以私信或者在下面的評論區裡面一起探討.