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.
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 absolute or fixed position the parent div.
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!