如何用CSS实现div位于图片下方？布局问题求助

一、实现.navBox容器在img.png下方的基础方法 #

块级元素默认会垂直排列，除非你给父容器或子元素设置了特殊布局，以下是两种常见场景的处理方式：

1. 父容器用默认块级布局 #

如果.content没有设置display: flex或绝对定位，只需确保图片和导航容器都是块级元素，就能自动上下排列：

/* 清除图片默认inline布局带来的底部间隙 */
.content img {
  display: block;
  /* 可选：让图片适配容器宽度 */
  width: 100%;
}

/* 包含.navBox的容器（假设类名为.nav-container）无需额外定位，自动在图片下方 */
.nav-container {
  /* 可选：给导航容器和图片之间加间距 */
  margin-top: 1rem;
}

2. 父容器用Flex布局 #

如果之前给.content加了display: flex，只需修改flex方向为垂直排列：

.content {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  gap: 1rem; /* 可选：设置图片和导航容器的间距 */
}

二、针对你编辑后的.mainBox Flex布局调整 #

你当前的CSS存在几个小问题，调整后可以优化布局效果：

1. 修正无效的align-items属性值
   align-items: left是错误写法，垂直方向对齐应使用flex-start/center/flex-end：

.mainBox{
  position: relative;
  display: flex;
  width: 95%;
  height: 25vh;
  padding-top: 5vh;
  justify-content: space-evenly;
  align-items: flex-start; /* 替换left，垂直方向顶端对齐 */
  /* vertical-align: middle对flex容器无效，可删除 */
}

2. 实现.navBox内部链接垂直居中
   当前的vertical-align: middle无法在块级容器中生效，给.navBox添加Flex布局实现居中：

.navBox{
  padding: 25px 10px 0; /* 简写padding */
  width: 20%;
  height: 20vh;
  text-align: center;
  background: transparent;
  display: flex; /* 新增 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  /* top: 50%未设置position，无效，删除 */
}

3. 关于z-index的用法
   z-index仅对设置了position: relative/absolute/fixed/sticky的元素生效，用来控制元素的堆叠层级：

• 数值越大，元素越靠上层
• 如果只是实现上下排列，完全不需要用到z-index；只有当元素出现重叠时，才需要用它调整堆叠顺序

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