css STICKY SECTION- sticks but sections below it scroll over it not under it

Hi,

https://cone-mandarin-7sb7.squarespace.com/listing-template

Password: PW

I'm trying to make a section on a page stick at the top pf the window on scroll, 

I am using this code:

section[data-section-id="65e5aa0e55845964ef4f58ec"].page-section {
position: sticky!important; 
top: 0px!important;
  z-index:0;
} 

It does stick but as I scroll down to the next section, the sticky section looks like it is positioned behind the sections below it, so gets covered up.

Any help appreciated!

If you're just doing it with custom code, you might try making the z-index higher.. generally you want it to be as low as possible but high enough to stay above everything else.. try:

z-index: 999;

It may go above some other elements on the page though (like the header maybe if you have that sticky also), so just lower the number until it's above everything else but below anything you want it to be behind. You could also just try z-index: 1; and see if that does the trick.. sometimes everything else on the page is already set for 0, so just upping it to 1 will do it.

Sometimes if I'm testing from the lowest end, I'll try 1 first, if that doesn't work, try 10, if that doesn't work, try 100, etc. it doesn't matter what the number is as long as it's higher than everything else on the page (which is default 0).

For the interested nerds like me—if you think of an x, y, z axis in geometry, the x and y axes are the horizontal and vertical directions of a flat plane.. the z pushes us into 3D space and comes out from the screen towards you, or goes behind the screen into the background.. the z-index is the level of that z plane, and the default is 0 (that's when things sit flat on the x/y plane).