Troubleshooting z-axis position with sticky images

Hello forum,

I’m an amateur designer in Tokyo working on a new website for an organization I run here. The design is pretty close to where I want it to be, but I’m having one persistent issue with z-axis positioning on the home page that I haven’t been able to figure out.

The desired response is for the text to appear and scroll into view above the two sticky images midway through the page. This usually works fine the first time, but after repeated up and down scrolling, the white background div often falls away behind the images, leaving the text scrolling background-less above the images. I am stumped as to why, because the WhiteBackground div has a higher z value than the sticky images, and it works the first time.

One solution that occurred to me was to recreate my fade-in interaction to apply not to the text box div, but to the heading classes, which would eliminate the need for the white background div (I added the white background div because I don’t want the background to fade in with the text). Nonetheless, in the interest of learning why this is happening despite seemingly correct z-axis stacking, I would much appreciate if anyone here could take a look and advise. Much appreciation from Tokyo!

Sam


Here is my site Read-Only: https://preview.webflow.com/preview/sento-neighborhood-b02915?utm_medium=preview_link&utm_source=designer&utm_content=sento-neighborhood-b02915&preview=19d68c6be4767f790c26d72228de47d3&mode=preview