多Div顺序排列、背景图适配及.topnav固定布局问题求助

嘿，我来帮你解决这个布局问题！咱们一步步来搞定所有需求，同时修复遮挡和偏移的问题：

.topnav 设置固定定位后会脱离文档流，导致下面的内容（比如#botone）会跑到导航栏下方，这就是你看到的垂直偏移问题。咱们这么调整：

body {
  margin: 0;
  padding-top: 49px; /* 加上和导航栏高度一致的内边距，避免内容被导航栏遮挡 */
}

.topnav {
  background-color: #000;
  position: fixed; /* 固定在页面顶部 */
  top: 0;
  left: 0;
  width: 100%; /* 占满整个页面宽度 */
  z-index: 999; /* 确保导航栏在最上层，不会被下面的内容覆盖 */
  height: 49px; /* 明确导航栏高度，和body的padding-top对应 */
}

如果之前#botone用了position: absolute这类脱离文档流的属性，就会导致后面的#bottwo、#botthree被它遮挡。咱们分两种场景处理：

场景1：垂直依次排列（默认块级布局） #

div本身就是块级元素，只要不设置脱离流的定位，就会自动垂直依次排列：

#botone, #bottwo, #botthree {
  width: 100%; /* 可选：让每个div占满页面宽度 */
  /* 不要设置 position: absolute/fixed，保持默认的static定位 */
}

场景2：水平依次排列（如果需要横向展示） #

如果是要横向排列，给三个div加一个父容器，用Flex布局实现：

<!-- 新增父容器包裹三个按钮div -->
<div class="bot-group">
  <div id="botone"></div>
  <div id="bottwo"></div>
  <div id="botthree"></div>
</div>

.bot-group {
  display: flex;
  gap: 12px; /* 可选：给div之间添加间距 */
  padding: 0 16px; /* 可选：添加左右内边距，避免贴边 */
}

#botone, #bottwo, #botthree {
  flex: 1; /* 可选：让三个div平分父容器宽度 */
}

用background-size: 100% auto让背景图宽度占满div，高度自动按比例缩放，同时可以用padding-top维持固定比例（比如16:9的图片），避免div高度塌陷：

#botone {
  background-image: url('你的背景图路径');
  background-size: 100% auto; /* 宽度100%，高度按图片比例自动适配 */
  background-repeat: no-repeat; /* 禁止背景图重复 */
  background-position: center center; /* 背景图居中显示 */
  /* 如果需要固定比例（比如16:9），用下面的padding-top代替height */
  padding-top: 56.25%; /* 16:9比例计算：9/16 = 0.5625 → 56.25% */
  /* 如果不需要固定比例，给div设置最小高度即可 */
  /* min-height: 280px; */
}

确保所有div都没有设置position: absolute（除非你有特殊需求），这样三个div就会正常依次排列，不会互相遮挡；.topnav固定在顶部，不会影响内容的正常展示；#botone的背景图也能完美适配宽度并按比例缩放。

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