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 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.

Thanks