title: Sticky rows in tree-like nested list structure
body: <p>I have a long list of items that are nested.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section#container {
    height: 250px;
    width: 350px;
    overflow: auto;
  }
  
  li {
    position: relative;
    background: white;
  }
  
  div {
    position: sticky;
    top: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="container"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;div&gt;Aaaaaaaaaaaa&lt;/div&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;div&gt;Bbbbbbbbbbbb&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div&gt;Cccccccccc&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div&gt;Dddddddddddd&lt;/div&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;div&gt;Eeeeeeeeee&lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;div&gt;Fffffffff&lt;/div&gt;
                &lt;ul&gt;
                  &lt;li&gt;
                    &lt;div&gt;Ggggg&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;div&gt;Hhhh&lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;div&gt;Iiii&lt;/div&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;pre&gt;More&lt;br&gt;content&lt;br&gt;so&lt;br&gt;we&lt;br&gt;can&lt;br&gt;scroll&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;/pre&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When scrolling, I want to always see the &quot;path that led to the current top row&quot;. For example, when scrolling further down, you should see</p>
  <pre><code>A                          # &quot;Path&quot;
     B                       # leading up to
        D                    # G (breadcrumbs)
           F                 #
              G
              H
              ...
  </code></pre>
  <p>Or maybe better visualized, see <a href="https://marchaos.github.io/react-virtualized-sticky-tree/" rel="nofollow noreferrer">THIS DEMO</a> of <a href="https://github.com/marchaos/react-virtualized-sticky-tree" rel="nofollow noreferrer">marchaos/react-virtualized-sticky-tree</a>. It does exactly what I am looking for. The library however uses JavaScript and just sets the <code>top</code> property according to the nest level. I am looking for a simple CSS-only solution (independent on the amount of recursion), which I think should be fairly basic but I cannot seem to find a solution.</p>
  <p>In the snippet above I attempted so with <code>position:sticky</code> on the <code>div</code>s, and it somewhat works, but they are unfortunately all <em>on the same line</em>. Thanks for any hints.</p>