"position:sticky;" doesn't works in SL?

Question

Is this correct?
I have tried while I was learning CSS and found that it doesn't works.
https://code.sololearn.com/WsEze0NX58Aq/?ref=app

Answer 1

https://code.sololearn.com/WWGWz3DG5jhQ/?ref=app
Kêsh@v , I think the main problem is
the width of the each and every element. it should be less than or equal to the viewport width. (but you can exceed the limit, such like 105vw, 110vw, but don't go too much)

You can exceed the viewport limit using padding-left, padding-right, margin-left, margin-right (these property values may affects the entire width of the web page/ may affect the responsiveness of the webpage). But this may causes slight variation in the position of the sticky element.

So the secure width should be less than or equal to the viewport.

[edit] Try to avoid margin/padding left and right if you are not using flex or grid(may affect the responsiveness)

try to learn flex and grid😊
happy coding

Answer 2

Kêsh@v sololearn support sticky property
see this i have edited ur code and this works now

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

Answer 3

Kêsh@v I am trying to figure out
As far I know sticky position won't work if parent element overflow is hidden or sticky position isn't told where it have to stick see here this works after removing parent element
https://code.sololearn.com/W1oDuln7J9c0/?ref=app

Answer 4

Atul So according to you if I remove that parent div block it will work fine?
Thanks but isn't there any way by keeping the parent div block as it is and apply sticky property to it?

Answer 5

Kêsh@v I just experimented i know that's not a solution but i am also curious why its not working with parent element

Answer 6

Atul Thanks for the effort 🙂
If you find anything please let me know okey?

Answer 7

i think you forgot to comment out this line in the css file

"Sticks the position of a block upto a particular offset"

Answer 8

would be more clear if you do it in a browser like chrome; It usually shows an error message

Answer 9

Ben Meehan Now I have commented out that line but still it's not working.
Maybe SoloLearn doesn't support this property because when I type "sticky" on the IDE of SL it didn't recommended me that property.
Usually it always recommends before typing the whole name.
That's why I think this property doesn't works on SL

Answer 10

Kelvin Paul Thanks a lot bro 😊

Answer 11

Atul Then what's the problem in my code?

Answer 12

Welcome bro 😇