CSS I need help, it's impossible 😦

Question

Here's my code.
I want to use position: sticky on that orange square, but I can't.
Why? Because I have overflow:auto in parent.
Why I have that? Because I wanted to solve problem with margins collapse.

I can use absolute position and solve problem with margins, probably (didn't try) but then I won't be able to use position:sticky.

So, is there any way to use margins + sticky together?

In other words can you make this orange square to be inside green square but not to touch borders of green square and to make orange square sticky?

edit: I've found a solution by implementing new rectangle above orange square. If you have any other solution, please share your knowledge.

Oh, one more question. When I delete overflow: auto, then position:sticky works but it doesn't show whole square when I scroll, why?

It has to do something with width. Change width in class a to 300px and sticky will work differently 😐, why? What's the relation between width and sticky?

https://code.sololearn.com/WJmDEhS4w9L2/?ref=app

Answer 1

position: sticky is a combination form of relative and fixed position. so, you can try out relative and fixed position to see which one is match

Answer 2

use position: fixed; instead of position: sticky;.

Answer 3

if you add some padding to the green square, the orange one doesn't touch the borders.

should the orange be sticky relative to window, so that when you scroll, is stays at the same place? if yes, don't nest the orange div inside the green one.

Answer 4

freind me i will help