位置粘滞影响嵌套的孩子，就像它做兄弟姐妹一样

Question

我试图在博客文章中增加标题的可见度。我的一个想法是在标题上使用position:sticky，这样标题元素(H1、H2、H3等)总是可以在屏幕顶部看到。问题是，这些元素按照定义是嵌套的。

这里有一个小提琴手，说明了这个问题：

https://jsfiddle.net/81rxzros/

是否有一种方法，使子元素将父元素“推”出屏幕，就好像它们都是兄弟元素一样？

目标是使所有标题标记(H1、H2、H3、H4)只将最近的标题“卡住”在页面顶部。它之前的标题应该被“推”出屏幕，即使“最近的标题”嵌套在它前面的标题中。

就像“四个标题”元素在上面的“小提琴”中的行为方式一样。

编辑:我知道我可以通过在每个H#标记上设置一个背景并将它们都设置为相同的高度来模仿这种行为--所以最近的元素“涵盖”了它前面的元素。但我并不特别希望将H6元素设置为与H1元素相同的高度。

Answer 1

我不明白你的问题，clearly.But，我想Z-index可以参与其中。在你给定的链接上，如果你做了h4{ Z-index:1; }，那么它也会推动它的父母，并且会站在前面。