I’m having difficulty getting absolute/fixed positioning to work in the way I want it to. My goal is to do a before/after reveal animation by having an image background as the child of another div that has overflow turned off so that when I transform the parent div and move it horizontally it cuts away the image and reveals another one underneath as the before/after.
However, no matter what settings I fiddle with I cannot get the image to stay fixed in one position while inside another div. My understanding is that if the image is set to a fixed position inside of a div that is static it should pull it’s position from it’s relationship to the page, however when I transform move the parent div that is set to static it moves the image along too, making it impossible to do a before/after type of effect.
Any help with this would be greatly appreciated!
Here is my site Read-Only: (https://preview.webflow.com/preview/mossandmire?utm_medium=preview_link&utm_source=designer&utm_content=mossandmire&preview=b1881392cfd4c743fe2304486013b422&workflow=preview)
There are many ways to solve this. You didn’t make clear from your Read-Only link which particular divs you were referring to.
I templated a Read-Only example that you can dissect that may achieve what you need. In terms of your understanding
that if the image is set to a fixed position inside of a div that is static it should pull it’s position from it’s relationship to the page
Since you are using the
transform property – > A transformed element creates a containing block even for descendants that have been set to position: fixed. In other words, the containing block for a fixed-position descendant of a transformed element is the transformed element, not the viewport. More on this topic here.
I recommend using a parent
div with multiple children and then
fixed position the parent
Thank you Whit!
Very much appreciate you taking the time to both reply and mock up an example.
I realise now that the way I wanted to achieve the effect isn’t possible so that’s saved a lot of further headache. I’ve got a good idea of what to try next. Cheers!
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.