Thiết kế website giá rẻ

Question

I have component structure as:

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

I am concerned about component 3, I want component3 to take full width of screen, so i gave absolute position with respect to viewport(as no parent is relative) and left and right to be 0.

But, due to this , my navbar has become unsticky, when component3 onscroll down reaches top.
When I remove absolute positioning, the navbar becomes sticky, but component3 does not take full screen width.
How, can I resolve this and achieve both without having any problem to miscellaneous components?

Also, zindex of navbar is greater than all other componenets.

Example code for debugging:

<!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="absolute-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 file:

body{
  color:#ffffff;
}
.container {
  width: 100%;
  height: 100%;
}

.navbar {
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 60;
  color:#fff;
  border:1px solid;
  background-color: aqua;
  /* You can add more styles for your navbar here */
}

.main-content {
  max-width: 700px;
  margin: 40px auto 0;
  width: 100%;
  height: 100%;
  /* Additional styling for your main content area */
}

.absolute-container {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  width: 100%;
  height: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #fff
  /* Additional styling for the container holding Component3 */
}

Thanks

Thiết kế website giá rẻ

Danh mục

Navbar is not sticky due to absolute child component