如何将图片定位在div内右侧且位于另一个div下方？

你可以通过以下调整实现目标布局，核心是让父容器成为绝对定位元素的参考，并正确控制叠加元素的位置：

修改后的代码 #

<div class="parent">
   <div class="above">
     <div>Square1</div>
     <div>Square2</div>
     <div>Square3</div>
   </div>
   <div class="under"><img src="你的图片地址"></div>
</div>

.parent {
  position: relative; /* 关键：让内部绝对定位元素以父容器为参考 */
  max-width: 750px;
  background-color: white;
}

.under img {
  width: 100%;
  height: auto;
  display: block; /* 消除图片默认的行内间距 */
}

.above {
  position: absolute;
  top: 20px; /* 按需调整距离顶部的位置 */
  left: 20px; /* 按需调整距离左侧的位置 */
  display: flex;
  gap: 15px; /* 方块之间的间距 */
}

.above > div {
  width: 80px;
  height: 80px;
  background-color: #ccc; /* 示例背景色，可根据设计替换 */
  display: flex;
  align-items: center;
  justify-content: center;
}

关键修改点说明 #

• 给.parent添加position: relative：确保.above的绝对定位是相对于父容器，而非整个视口，避免元素错位。
• 移除.parent的flex-direction: column：该布局会让子元素纵向排列，不符合叠加需求，直接让图片占满父容器宽度即可。
• 修正无效CSS属性：原代码中align-items: right是错误值，CSS中没有这个属性值，改为通过定位控制叠加元素位置更直接。
• 优化.above布局：用flex让三个方块横向排列，可通过gap、width、height等属性匹配你的设计样式。

如果考虑采用背景图方案（适合图片无需单独交互的场景），可参考以下代码：

.parent {
  max-width: 750px;
  background-color: white;
  background-image: url('你的图片地址');
  background-size: cover;
  background-position: center;
  padding: 20px; /* 为内部元素预留空间 */
  min-height: 300px; /* 根据图片实际高度调整 */
}

.above {
  display: flex;
  gap: 15px;
}

.above > div {
  width: 80px;
  height: 80px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

此方案无需处理绝对定位，但如果图片需要响应式调整或交互，第一种方案的灵活性更高。

内容的提问来源于stack exchange，提问作者cat15ets