CSS实现图片浮动在底层 div 之上，而不会影响底层 div 的布局和内容

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