I need help with positioning four HTML elements on my page. One of them has a scroll effect and scrolls downward. I want the green-colored div to always be above Block B but below Block C. When Block B overlaps with Block C, I would like Block C to be hidden behind Block B. Also, I want the darker green element to display in the same way as Block A.
For reference, you can view the corrected Codesandbox here.
return (
<div className=" h-[200vh] w-full flex flex-col items-center">
<div className=" relative mt-[300px] bg-green-900 w-full h-[200px] text-black text-center flex flex-col justify-between text-white ">
<div className=" relative z-10">
Block A
</div>
</div>
<Image
src={borderSvgTexture}
className=" relative h-auto w-full min-w-screen mt-[-5px] "
alt=""
/>
<div className=" bg-blue-600 w-full h-[200px] mt-[-50px] ">
<div className=' mt-[100px] text-center'>Block B</div>
</div>
<motion.div
style={{ y }}
className="h-[500px] flex justify-center absolute inset-x-0 mx-auto max-w-[1800px] text-white"
>
<div className=" w-[100px] h-[100px] bg-red-500">Block C</div>
</motion.div>
</div>
)
I've experimented with different z-index combinations, but I can't seem to achieve the desired layout without some unintended hiding occurring. I'm starting to wonder if what I envision is even possible.