Streaming live at 10am (PST)

Overflow: Hidden Not working on Fixed Child Element


I've got an issue on this page:

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.


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.


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