+ 7

CSS I need help, it's impossible 😦

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

21st Oct 2018, 11:14 PM
voja - avatar
4 Answers
+ 12
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
22nd Oct 2018, 12:22 AM
Amethyst Animion
Amethyst Animion - avatar
+ 1
use position: fixed; instead of position: sticky;.
22nd Oct 2018, 1:00 AM
Potato Hacker
Potato Hacker - avatar
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.
22nd Oct 2018, 12:58 AM
wenz - avatar
freind me i will help
24th Oct 2018, 9:29 PM
Gman_49 - avatar