如何让flex container的子项半覆盖下方容器？

看起来你是想让顶部的“portfolio”标题和导航栏，部分覆盖下方的米白色矩形容器对吧？我看了你的代码，问题主要出在Flex属性的误用和定位逻辑上，咱们一步步来修正：

1. 先把Flex容器的对齐逻辑改对 #

你现在给子元素.header-container和nav加了align-items: left/right，但align-items是Flex容器的专属属性，而且根本没有left/right这种取值😅。要让标题左靠、导航右靠，得在父容器.flex-container上用justify-content控制水平分布，用align-items控制垂直对齐：

.flex-container { /*parent flexbox*/
  display: flex;
  overflow: hidden;
  justify-content: space-between; /* 让两个子元素分别贴住左右边缘 */
  align-items: center; /* 让标题和导航垂直居中对齐 */
  position: relative; /* 让z-index生效，同时作为子元素定位的参考 */
  z-index: 2; /* 确保header层级在下方main容器之上 */
  padding: 0 2rem; /* 用父容器的padding统一控制左右间距，替代子元素的margin */
}

记得把.header-container的margin-left:2rem和nav的margin-right:2rem删掉，这样布局更统一。

2. 实现“覆盖”的核心：调整容器间距与层级 #

你现在的header和main是上下正常排列的，要让header压在main的顶部，我们给header加一个负的margin-bottom，让它往下“伸”进main的区域，同时配合main的内边距调整，避免内容被挡住：

.flex-container {
  /* 保留上面的属性，新增这行 */
  margin-bottom: -6rem; /* 数值可以自己调，比如-6rem就是让header往下压6rem，覆盖main顶部 */
}

/* 同时给main容器调大顶部内边距，避免内容被header挡住 */
.main-container-index {
  /* 其他属性不变，修改padding */
  padding: 8rem 2rem 2rem; /* 把顶部padding从2rem改成8rem，留出被覆盖的空间 */
}

另外你给.header-container加的top:2rem是无效的，因为它的父容器没设置position: relative，现在我们给父容器加了这个属性，如果要微调标题的垂直位置，可以用transform：

h1 {
  /* 其他属性不变，新增 */
  transform: translateY(1rem); /* 让标题往下移1rem，适配覆盖效果 */
  margin: 0; /* 去掉h1默认的上下margin，避免多余间距 */
}

3. 修复导航栏的排列问题 #

你的nav现在没有设置display: flex，里面的链接会默认垂直堆在一起！要让导航横向排列，得给nav加上Flex属性：

nav { /*nav container*/
  flex: 1;
  gap: 1.5rem;
  margin-top: 1rem;
  overflow: hidden;
  display: flex; /* 让链接横向排列 */
  justify-content: flex-end; /* 让导航链接靠右对齐 */
  align-items: center; /* 垂直居中链接文字 */
}

把之前的align-items: right删掉，这个写法是错误的。

最后整合后的完整代码 #

CSS 部分

:root {
  /* 确保你的自定义变量都在这里定义了，不然会失效 */
  --color-red: #ff4444;
  --color-cream: #f8f5e6;
  --font-display: 'Helvetica Neue', sans-serif;
  --font-main: 'Arial', sans-serif;
}

.flex-container { /*parent flexbox*/
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  padding: 0 2rem;
  margin-bottom: -6rem;
}

.header-container {
  /* 去掉多余的margin和top属性 */
}

h1 { /*font formatting*/
  font-family: var(--font-display);
  font-size: 165px;
  gap: 0.5rem;
  transform: translateY(1rem);
  margin: 0;
}

nav { /*nav container*/
  flex: 1;
  gap: 1.5rem;
  margin-top: 1rem;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav a { /*nav font formatting*/
  font-weight: 700;
  font-size: 1.2rem;
  font-family: var(--font-main);
  text-decoration: none;
  color: black;
}

/*white rectangle*/
.main-container-index {
  background-color: var(--color-cream);
  margin: 2rem auto;
  max-width: 90%;
  min-height: 60vh;
  border-radius: 70px 70px 20px 20px;
  padding: 8rem 2rem 2rem;
  position: relative;
  z-index: 1;
}

HTML 部分

<header class="flex-container">
  <div class="header-container">
    <h1 style="color:var(--color-red)">portfolio</h1>
  </div>
  <nav>
    <a href="projects.html">PROJECTS</a>
    <a href="blog.html">BLOG</a>
    <a href="contact.html">CONTACT</a>
  </nav>
</header>
<main class="main-container-index">
  <!-- 这里放你的页面内容，现在不会被顶部header挡住啦 -->
</main>

你可以根据Figma里的设计，微调margin-bottom和padding-top的数值，直到达到你想要的覆盖效果。另外别忘了确保所有自定义CSS变量都在:root里定义好，不然颜色和字体可能会失效哦～

内容来源于stack exchange