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