Sticky is not working in header part..

Question

<header>
<h1>S U M M E R</h1>
<aside><img src="" alt=""></aside>
<aside><img src="" alt=""></aside>
</header>
It is working ------
header{
position: sticky;
top: 10px;
}
but ----------It is not working ------
header h1{
position: sticky;
top: 10px;
}

?????????

Answer 1

So .what is solution

Answer 2

Thanks

Answer 3

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

Answer 4

Please try stick in this code..

Answer 5

Sticky works well with nav or h1, that's good
But my problem is that when we write <header><h1></h1></header>
Then in this case sticky works only with header tag but not working with h1 tag, that is my problem

Answer 6

Yes, that's not an error, that feature of sticky.

Sticky is fixed at condition true;
and fixed moves away with container.

If you want your h1 to always stay on top, you should position sticky on an element which is child of body, in your case the header element.

Answer 7

Thanks to be there ! I think this is predefined behavior of sticky.

Answer 8

Yes...

Answer 9

You use sticky when your element initial position is lower than 10px

Answer 10

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