如何在两栏布局中将一张图片居中放置于另一张图片之上

问题场景 #

采用两栏Flex布局，需要在第一栏内将一张图片居中叠加在另一张图片上方，但设置样式后图片始终出现在body左上角，z-index无法让图片跟随父容器。

原始代码 #

HTML部分

<div class="Parents">
<div class="child1">
  <img class="IMAGEA1" src="assets/images/imageborder.png">
  <img src="assets/images/operation.png">
</div>
<div class="child2">
  <h4>Operation</h4>
  <p>We provide customised and well design Standard Operating Procedure for every A farm enabling it to be run
    seamlessly easy and effectively by almost anyone.</p>
</div>
</div>

CSS布局代码

.Parents {
  display: flex;
  flex-direction: row;
  column-gap: 50px;
  width: 756px;
  height: 300px;
  margin: 0 auto;
}

.child1 {
  width: 50%;
  height: 200px;
  text-align: center;
  color: black;
  margin: 0 auto;
}

.child2 {
  width: 50%;
  height: 200px;
  margin: 0 auto;
}

.Parents p {
  text-align: justify;
  margin-top: 40px;
}

CSS图片样式代码

.IMAGEA1{
  z-index: 1;
}
.Parents img{
  position: absolute;
  top: 25px;
  left: 25px;
  z-index:3;
}

核心问题 #

绝对定位的元素会相对于最近的非static定位父元素定位，当前.child1默认是position: static，所以图片会相对于body定位，导致脱离父容器。

修改方案 #

1. 给.child1添加position: relative，让它成为内部绝对定位元素的参考容器
2. 修改图片的定位方式，实现相对于.child1居中
3. 调整z-index的优先级，确保层级正确

修改后的完整CSS代码 #

.Parents {
  display: flex;
  flex-direction: row;
  column-gap: 50px;
  width: 756px;
  height: 300px;
  margin: 0 auto;
}

.child1 {
  width: 50%;
  height: 200px;
  text-align: center;
  color: black;
  margin: 0 auto;
  position: relative; /* 新增：作为绝对定位的参考容器 */
}

.child2 {
  width: 50%;
  height: 200px;
  margin: 0 auto;
}

.Parents p {
  text-align: justify;
  margin-top: 40px;
}

/* 图片样式修改 */
.IMAGEA1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 实现居中 */
  z-index: 1;
}
.Parents .child1 img:not(.IMAGEA1) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 实现居中 */
  z-index: 3;
}

说明 #

• position: relative：给父容器设置后，内部绝对定位元素会以它为基准定位，不会脱离父容器
• top:50%; left:50%; transform: translate(-50%, -50%)：这是实现元素在父容器内居中的通用方法，不管元素自身尺寸如何都能生效
• 分开设置两张图片的样式：避免全局img选择器覆盖样式，确保每张图片的层级和定位正确

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