前言：遇到个需求，需要图片显示在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位置的调整
)
