Sticky rows in tree-like nested list structure - html

Question

I have a long list of items that are nested.
section#container {
height: 250px;
width: 350px;
overflow: auto;
}
li {
position: relative;
background: white;
}
div {
position: sticky;
top: 0;
}
<section id="container">
<ul>
<li>
<div>Aaaaaaaaaaaa</div>
<ul>
<li>
<div>Bbbbbbbbbbbb</div>
</li>
<li>
<div>Cccccccccc</div>
</li>
<li>
<div>Dddddddddddd</div>
<ul>
<li>
<div>Eeeeeeeeee</div>
</li>
<li>
<div>Fffffffff</div>
<ul>
<li>
<div>Ggggg</div>
</li>
<li>
<div>Hhhh</div>
</li>
<li>
<div>Iiii</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<pre>More<br>content<br>so<br>we<br>can<br>scroll<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.</pre>
</li>
</ul>
</section>
When scrolling, I want to always see the "path that led to the current top row". For example, when scrolling further down, you should see
A # "Path"
B # leading up to
D # G (breadcrumbs)
F #
G
H
...
Or maybe better visualized, see THIS DEMO of marchaos/react-virtualized-sticky-tree. It does exactly what I am looking for. The library however uses JavaScript and just sets the top 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.
In the snippet above I attempted so with position:sticky on the divs, and it somewhat works, but they are unfortunately all on the same line. Thanks for any hints.

Answer 1

You can simply set z-index to an individual content in order to differentiate it from the other contents which doesn't have sticky position and set the top of an them.
Remember to set top which is different from the one another in order to align them one under another because if you set the same top will cause an overlapping.
the following is an example
section#container {
height: 240px;
width: 350px;
overflow: auto;
}
li {
position: relative;
background: white;
}
div {
position: sticky;
}
.first {
z-index: 99999;
background: red;
top: 0;
}
.second {
z-index: 99999;
background: blue;
top: 15px;
}
.third {
z-index: 99999;
background: green;
top: 30px;
}
<section id="container">
<ul>
<li>
<div class="first">Aaaaaaaaaaaa</div>
<ul>
<li>
<div>Bbbbbbbbbbbb</div>
</li>
<li>
<div>Cccccccccc</div>
</li>
<li>
<div class="second">Dddddddddddd</div>
<ul>
<li>
<div>Eeeeeeeeee</div>
</li>
<li>
<div class="third">Fffffffff</div>
<ul>
<li>
<div>Ggggg</div>
</li>
<li>
<div>Hhhh</div>
</li>
<li>
<div>Iiii</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<pre>More<br>content<br>so<br>we<br>can<br>scroll<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.</pre>
</li>
</ul>
</section>