Hello everyone.
I would like to create a full screen vertical slider with fixed elements inside every screen.
I made this mockup with full screen divs with fixed background images and a heading with position relative.
Now, I would like to have the heading in a fixed position, just like the background images, but if I do it, they overlay.
So basically I would like the divs to mask them.
If there is a solution for this, I will to apply this navigation to my portfolio website, also made with webflow: http://www.dariostefanutto.com/
Since the homepage of my website has full size background images, I put the navbar inside each slide, so that I can choose if to use a white or a black navbar, based on the background image.
Oh, sorry! I’ll try to explain again: If you open the mockup, you’ll see that there is an heading inside every div, and that scrolling it moves, because it’s position relative. I would like it not to move, and to be masked like the background images. The problem is, if I make the headings position fixed, all of them overlay, regardless the masks.
I made a quick sketch in PS just to give the idea.
A rule : a fixed position element is fixed with respect to the viewport, not another element. Therefore since the viewport isn’t cutting it off, the overflow becomes irrelevant.
Giving a Fixed position to an element kind of extract it from the HTML hierarchy so even if you were giving the overflow:hidden property to your sections http://cl.ly/image/2v3A0W301t1P it would not work.
You need to abandon the idea to make these titles position:fixed and find another way.
