Overflow: Hidden Not working on Fixed Child Element

I’ve got an issue on this page: https://preview.webflow.com/preview/intradiemtest?preview=b77575747e7c43db3c9327de12365249

On it, about 3/4 of the way down, I have a Div that is set to overflow: none; with a child div that is set to absolute position. It’s the one that has ‘Before’ in it.

I’ve looked around and I think I’m correct with my understanding of how that should behave semantically, but for the life of me I can’t get the overflow to cut off the content.

Any ideas? I want to do it with the before and after sections on the page, and both will have an absolute background image as well in the final design.

Hi @tomjohn, could you tell us what page contains element that you have issues with?

Whoops, forgot that part. The page is called solution-1, and is nested in the core pages folder.


Well, I am not sure that I am correctly understand where the problem is.
You call that div with “Before” text absolute positioned, but it has position fixed.
you can see this on screencast, I changed position to absolute and it changed behavior

Sorry about that, I think I’m confusing even myself. In my original post I wrote absolute when I meant fixed. Let me rephrase the question:

I’d like a parent div with overflow: none; to clip a child div that has a fixed position (not absolute) as the user scrolls. Is this possible?

Ok, now lets see if I understand correct your question. :smiley:
If I got it right, you want that background from this section would be fixed, but visible only when this section is in the screen view. Right?

Not quite. I can handle a fixed clipped background image, what I want is for the parent container to clip the contents of the child container. In this case, it’s text.

I’ve accomplished something similar in the past using z-indexes, but that gets out of hand quickly and I’d like to avoid the issues negative z-indexes cause to the webflow editor.

1 Like

Ok, I got it.

Unfortunately, I don’t think it is possible in the way you expect it.
When element got fixed position it become independent from it’s parent. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.