So I created a link-block that remains fixed on the page for the entirety of a user’s scroll (users can click it to be taken back to the top of the page). In preview mode, the link-block is always in view and scrolls in front of every element. However, in the published version the link-block only scrolls in front of the text and is cut off by the images. If you know what might be causing this any help would be much appreciated . To view the issue, click on the Work link, then scroll down until the Serendipity section comes into view, click on the Serendipity section, resize your window to be small (the site on a small screen or window will show you the error, as the link-block and text/images don’t overlap on bigger screens/windows), and then scroll down until the link block appears and scrolls in front of text but behind images.
Try putting the link block in another div. Then give the div position: fixed as well as the height, width, and margin properties of the link block. Lastly, set the link block to position relative and give it a 999 z-index.
If you set up your link block to z-index = 1 and set up your Page Text Serendipity position relative and z-index 0 it should work fine.
When a sibling element is set to auto the stacking context will put the last element on top. This is why setting to relative will include it in the same stacking context as the link block.
Side Note @PHRyan : I think that if you have the right stacking order it doesn’t have an effect to have a very high z-index except for debugging in case you setup a z-index somewhere which you don’t remember.
Wow this worked perfectly and actually helped me fix another issue in the site too. Thank you so much for your help Definitely would have been stuck without you!
. To view the issue, click on the Work link, then scroll down until the Serendipity section comes into view, click on the Serendipity section, resize your window to be small (the site on a small screen or window will show you the error, as the link-block and text/images don’t overlap on bigger screens/windows), and then scroll down until the link block appears and scrolls in front of text but behind images.