如何设置屏幕右侧图片置于<main>盒子后方？

解决方案 #

核心问题是：z-index仅对非static定位的元素生效，你当前的<main>和图片都是默认的position: static，所以z-index设置完全不起作用。右侧图片因为在HTML结构里位于<main>之后，自然会覆盖<main>。

最优实现（Flex布局，适配视口） #

用Flex容器包裹元素，既能保证z-index生效，又能让图片和<main>始终对齐，不会随视口变化移位：

修改后的HTML

<body>
  <div class="img-main-container">
    <img id="leftimg" src="/Images/left.png">
    <main></main>
    <img id="rightimg" src="/Images/right.png">
  </div>
</body>

修改后的CSS

/* 外层容器用Flex实现居中对齐 */
.img-main-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 让容器占满视口高度，按需调整 */
}

main {
  width: 33em;
  height: 31em;
  z-index: 999;
  position: relative; /* 关键：添加非static定位，让z-index生效 */
  background-color: #fff; /* 可选：给main加背景色，方便确认层级 */
}

#leftimg, #rightimg {
  z-index: 1;
  width: auto;
  height: 35em;
  position: relative; /* 关键：添加非static定位，让z-index生效 */
}

#leftimg {
  margin-right: -1.5em; /* 保持原有的重叠间距 */
}

#rightimg {
  margin-left: -2em; /* 保持原有的重叠间距 */
}

原理说明 #

1. 给<main>和图片添加position: relative后，z-index属性开始生效，此时z-index值更高的<main>会覆盖在图片上方。
2. Flex容器确保三个元素始终居中对齐，视口缩放时整体布局不会混乱，图片的margin仅负责控制与<main>的重叠距离，不影响整体定位。

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