Navbar因absolute子组件失效的问题及解决方案咨询

现有组件结构如下：

<div>
 <Navbar /> -> h-[72px] sticky top-0 z-[60]
 <div> -> max-w-[1360px] mx-auto w-full h-full mt-[40px]
  <Component1 /> -> 杂项组件
  <Component2 /> -> 杂项组件
  <div>
    <Component3 /> -> absolute left-0 right-0 flex w-full h-full py-5
  </div>
 </div/>
</div>

需求：

1. Component3占满屏幕宽度
2. Navbar的sticky定位始终生效，且z-index高于所有组件
3. 不影响Component1、Component2的布局

问题：给Component3设置absolute定位后，滚动到该区域时Navbar的sticky属性失效；移除absolute则Component3无法全屏。

核心原因：absolute定位的元素脱离文档流，导致父容器main-content的高度计算忽略了Component3的高度，滚动时浏览器无法正确触发sticky导航栏的粘性逻辑。

以下是两种可行方案，均不影响其他组件布局：

方案一：负margin抵消容器宽度限制 #

给Component3的容器添加负margin，抵消main-content的左右自动边距，同时保持元素在文档流中：

.component3-container {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 5px 0;
}

方案二：vw单位+transform实现全屏 #

通过width:100vw设置全屏宽度，再用transform: translateX(-50%)和left:50%让元素对齐页面中心，同时保持在文档流：

.component3-container {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 0;
}

HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
   <div class="container">
      <nav class="navbar">Navbar</nav>
      <div class="main-content">
        <div class="component1">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, explicabo! Doloremque consequuntur, perspiciatis voluptatum natus repellendus ipsum possimus excepturi iure suscipit reprehenderit inventore nam atque eveniet ab corrupti consectetur labore similique ratione. Sunt, distinctio natus. Animi possimus fugiat eius asperiores, iusto, recusandae aperiam temporibus saepe repellendus beatae quis eum consectetur voluptatum! Molestiae totam libero maiores ullam facilis architecto mollitia ex eum quo! Adipisci tempora harum ipsum? Dolor ea quaerat blanditiis esse, dolorum est expedita explicabo eos iusto nulla aspernatur odio quas quasi repellat eum, ex modi obcaecati voluptatem consequuntur ipsam natus tenetur laudantium doloribus. Eos atque aliquid quae libero enim.
        </div>
        <div class="component2">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, explicabo! Doloremque consequuntur, perspiciatis voluptatum natus repellendus ipsum possimus excepturi iure suscipit reprehenderit inventore nam atque eveniet ab corrupti consectetur labore similique ratione. Sunt, distinctio natus. Animi possimus fugiat eius asperiores, iusto, recusandae aperiam temporibus saepe repellendus beatae quis eum consectetur voluptatum! Molestiae totam libero maiores ullam facilis architecto mollitia ex eum quo! Adipisci tempora harum ipsum? Dolor ea quaerat blanditiis esse, dolorum est expedita explicabo eos iusto nulla aspernatur odio quas quasi repellat eum, ex modi obcaecati voluptatem consequuntur ipsam natus tenetur laudantium doloribus. Eos atque aliquid quae libero enim.
        </div>
        <div class="component3-container">
          <div class="component3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, explicabo! Doloremque consequuntur, perspiciatis voluptatum natus repellendus ipsum possimus excepturi iure suscipit reprehenderit inventore nam atque eveniet ab corrupti consectetur labore similique ratione. Sunt, distinctio natus. Animi possimus fugiat eius asperiores, iusto, recusandae aperiam temporibus saepe repellendus beatae quis eum consectetur voluptatum! Molestiae totam libero maiores ullam facilis architecto mollitia ex eum quo! Adipisci tempora harum ipsum? Dolor ea quaerat blanditiis esse, dolorum est expedita explicabo eos iusto nulla aspernatur odio quas quasi repellat eum, ex modi obcaecati voluptatem consequuntur ipsam natus tenetur laudantium doloribus. Eos atque aliquid quae libero enim.
          </div>
        </div>
      </div>
    </div> 
  </body>
</html>

CSS #

body{
  color:#ffffff;
  background-color: #222;
}

.container {
  width: 100%;
}

.navbar {
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 60;
  color:#fff;
  border:1px solid;
  background-color: aqua;
  line-height: 72px;
  padding: 0 20px;
}

.main-content {
  max-width: 700px;
  margin: 40px auto 0;
  width: 100%;
  padding: 0 20px;
}

.component1, .component2 {
  margin-bottom: 20px;
  background-color: #444;
  padding: 15px;
}

/* 方案一样式 */
.component3-container {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 5px 0;
  background-color: #333;
}

.component3 {
  max-width: 700px;
  margin: 0 auto;
  padding: 15px;
}

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