如何让顶部logo、注册栏置于背景图上方且不使用absolute/fixed定位

不用position: absolute/position: fixed的最优方案是用CSS Grid实现同容器内的元素堆叠，既保持元素在正常文档流中受父容器约束，又能实现重叠显示效果，修改步骤如下： #

第一步：给父容器添加Grid布局 #

给外层的.first-section容器设置Grid单格布局：

.first-section {
  display: grid;
  /* 定义只有1行1列的网格 */
  grid-template: 1fr / 1fr;
}

第二步：让两个子元素共用同一个网格单元格 #

让顶部导航栏和下方的左右内容区都占据同一个网格位置，自然形成堆叠效果：

.top-firstsection, .leftandright {
  /* 语法为 行起始 / 列起始 / 行结束 / 列结束，都占第一行第一列 */
  grid-area: 1 / 1 / 2 / 2;
}

第三步：调整顶部导航的层级和对齐 #

保证顶部导航显示在内容区上方，同时调整位置符合设计需求：

.top-firstsection {
  display: flex;
  z-index: 10; /* 数值只要大于下层内容区的默认层级0即可 */
  align-items: center; /* 垂直居中logo和导航按钮 */
  padding: 0 2rem; /* 可根据需求调整左右边距，对齐页面内容 */
}

补充说明 #

如果之前使用负margin没有生效，大概率是因为没有调整z-index层级，导致顶部导航被后续的内容区覆盖。上述Grid方案完全符合需求：导航栏仍属于.first-section的正常文档流子元素，不会脱离父容器边界，也不会影响后续其他区块的布局。

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