Streaming live at 10am (PST)

Link Block Scrolling Behind Imagesd


#1

Hi everyone,

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 :slight_smile: . 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.

Here is my read only link, https://preview.webflow.com/preview/portfolio-2504ab?preview=9e0ae2f22a6fcff561df72872e29abb3

Here is the published link, http://portfolio-2504ab.webflow.io/

Thank you so much everyone!

Best

Michael


#2

Hey Michael!

Just as a quick test have you tried increasing the z-index of the link block to something like 999?

-Ryan


#3

Hi Ryan,

Thank you for the suggestion! Unfortunately, it didn’t work though. Any other ideas of why this might be happening?

Best,

Michael


#4

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.


#5

Hi @mrigs,

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.

I hope it helps.

PS: a bit of reading material on the matter


#6

Yeah, I thought making the link relative to a fixed parent might help but your solution works perfect! :sunglasses:


#7

Wow this worked perfectly and actually helped me fix another issue in the site too. Thank you so much for your help :slight_smile: Definitely would have been stuck without you!

Best,

Michael