Absolute positioned element exceeding (and affecting) scrollable container.
Hello everyone! I recently ran into this tricky situation in which I have an absolute positioned element which is inside of a relative positioned element, which again ist positioned in some other container which allows for vertical scrolling. (there's more to it, but this is a minimal reproducible example). However, the absolute positioned element supposed to be way bigger than the containing element, which cases the container in which they're both placed to be affected.
I tried to reproduce the example in a codepen: https://codepen.io/ConfusedHorse/pen/MWLvMbN
Because this is just a reduced example, the following properties must not be changed:
- the overflow behavior of the containing element
- position relative on the second element
I hope someone has an idea or some helpful impulse. Thank you in advance!
Info: the issue is easier to witness when moving the mouse over the example, so the scrollbars get refreshed.
6 Replies
just to be sure. the turning box, is that only a color, or will it have other content?
It is a combination of a rotating repeating-linear-gradient and a radial opacity mask with a counter rotating radial-gradient, both using ::before and ::after. This was supposed to be a light weight approach for sun rays.
However, both elements do not contain anything else, and it is not necessary to use ::before or ::after.
ah, that's too bad. hoped we could get away with a box-shadow.
Yea, this is a difficult one... Have to think about it.
Looking forward to your ideas!
I think I might have found a solution. Have to test it in a more complex setup though: https://codepen.io/ConfusedHorse/pen/yLZPBNo
be aware fixed is relative to the viewport, it won't scroll along. If that's okay, fine. (I thought it had to be relative to grey box)
Apparently my joy was premature :<
Okay, I saved again. And I think I've got a solution here.
How do I mark something solved? Got it.