无需JavaScript实现大图在缩略图上方显示的CSS布局求助

问题核心是CSS通用兄弟选择器~只能选中当前元素之后的同级元素，所以DOM结构里radio必须在.image-bg前面才能触发样式切换，但我们可以通过布局反转视觉顺序来实现大图在上的效果，DOM结构保持不变。

解决方案：用Flexbox反转视觉顺序 #

给父容器.image-box设置flex-direction: column-reverse，这样DOM中先写的radio会被放到视觉上的下方，后写的.image-bg会显示在上方，同时不影响~选择器的生效逻辑。

修改后的完整代码 #

.image-box {
  display: flex;
  flex-direction: column-reverse;
  align-items: center; /* 可选，让缩略图居中 */
  gap: 15px; /* 控制大图和缩略图的间距 */
}

.image-bg {
  width: 500px;
  height: 500px;
  border: 1px solid #222;
  background-size: cover;
}

.image-box input[type="radio"] {
  width: 80px;
  height: 80px;
  display: inline-block;
  border: 1px solid #D3D3D3;
  outline: none;
  appearance: none;
  cursor: pointer; /* 可选，添加鼠标指针提示 */
}

#img-01 {
  background-image: url(<image1>);
  background-size: cover;
}

#img-02 {
  background-image: url(<image2>);
  background-size: cover;
}

#img-01:checked ~ .image-bg {
  background-image: url(<image1>);
}

#img-02:checked ~ .image-bg {
  background-image: url(<image2>);
}

<div class="image-box">
  <input type="radio" id="img-01" name="image" checked>
  <input type="radio" id="img-02" name="image">       
  <div class="image-bg"></div>
</div>

关键说明 #

1. Flex布局反转：flex-direction: column-reverse会把容器内的子元素按DOM顺序反向排列，视觉上.image-bg（DOM中最后一个元素）会显示在最上方，radio（DOM中前面的元素）显示在下方。
2. 选择器逻辑保留：DOM结构仍保持radio在前、.image-bg在后，所以#img-01:checked ~ .image-bg这类选择器依然能正常触发背景图切换。
3. 布局优化：用gap替代原来的margin来控制间距，配合align-items: center让缩略图居中，布局更简洁可控。

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