One method I am exploring to enhance the visibility of headers in blog posts involves utilizing position:sticky on the header. This way, header elements like H1, H2, H3, etc., can remain fixed at the top of the page regardless of scrolling. The issue arises when these elements are nested within one another.
To illustrate the problem, refer to this code snippet:
https://jsfiddle.net/81rxzros/
Is there a solution where child elements can displace parent elements similar to siblings?
The ultimate objective is to have only the most recent header (H1, H2, H3, or H4) stay sticky at the top of the screen. As each new header appears, the previous one should be displaced off the screen, even if it is nested within the preceding header.
This behavior mirrors how the "fourth header" elements behave in the provided jfiddle link.
Edit: While I could achieve a similar effect by assigning equal heights and backgrounds to all header tags, such as H#s, I would prefer not to make every element identical in size to the original H1 tag.