前言：遇到個需求，需要圖片顯示在div之上，但是不占用div的空間布局，網上的答案五花八門，但其實使用css就可以簡單實現，僅以此博客作為記錄
舉個栗子
<div class="container"><img src="path/to/your/image.jpg" class="floating-image" alt="Floating Image">
</div>想要上述img標簽的顯示不影響底層div標簽的布局和內容，div和img的樣式設置如下：
container {position: relative; /*底層使用相對定位：確保內部使用絕對定位的元素相對于它進行定位*/width: 100%;height: 300px;background-color: lightgrey;
}
.floating-image {position: absolute; /* 使用絕對定位 */top: 0; /* 靠近底層布局最上方 */left: 0; /* 靠近底層布局最上方左邊 */width: 100px; /* 調整圖片大小 */height: 100px;
}
注：
- 兩個標簽里面的position屬性是必須要加的，是實現浮動的關鍵
- 圖像使用position: absolute之后，就可以通過top、left、right、bottom等屬性來實現相對于底層div位置的調整
)
