テーマ
position:stickyをどれだけ深く掘り下げたところで、落ち着く先のパターンなんか一つや二つ。
まずは使い方のアイデアを練って、それを可能にする。たったそれだけのお話に必要な知識はせいぜい↓こんなもの。
1. sticky(z-index:2)に妹relative（z-index:1）を作る。
stickyがうまく機能しない場合、「ブラウザがIEではないか。」→「stickyの後ろ（同じ親）にrelativeやstickyはあるか。」→「z-indexは正しい指定になっているか。」をチェックする。
2. 困った時はfixed(overflow:auto)を併用。
最前面に配置する要素がtop:0でなく、且つ妹relativeを配置している場合、その妹は兄貴の下をくぐり抜けてしまう。
これを防ぎたい場合は、兄stickyの代わりに親要素にposition:fixed;overflow:auto;top:hogeを指定し、兄はtop:0にする。
3. href=#idはjsで補う。
stickyとhref=#idの相性は悪い。
ページ下部の一族を表示している時にページ上部の一族へjumpすると、妹が兄貴に隠れてしまう。
header(fixed)+article(absolute)のケースと違い、
margin-top:-25px;padding-top:25pxでは不十分なので、
jsでlocation.href='#';location.href='#id'を並べ、そのついでに親要素.scrollBy(0,-25)で微調整するのが手っ取り早い。
サンプル
上の画像のように、爺さん[例:2]からそのひ孫[例:2111]を常に綺麗に表示するsticky-list（上述した3つの観点を網羅）のサンプルコードは以下。
href=#id機能は使わず、list表示のみを行いたい場合は、コメントアウトで挟んだ部分は削除可。
<meta charset=utf-8>
<style>
*{margin:0;padding:0;box-sizing:border-box}
ul{list-style:none}
#i1{position:fixed;left:20%;width:60%;top:20%;height:60%;overflow:auto;padding-bottom:300px}
#i1 ul ul{padding-left:50px}
#i1 li{z-index:1;line-height:25px}
#i1 li.t{position:sticky;z-index:9;top:0;background:#bbb}
#i1 li li.t{z-index:8;top:25px;background:#ccc}
#i1 li li li.t{z-index:7;top:50px;background:#ddd}
#i1 li li li li.t{z-index:6;top:75px;background:#eee}
/*****textbox*****/
#i3{position:fixed;left:20%;width:60%;top:80%;height:25px;line-height:25px;text-align:center}
/****************/
</style>
<body>
<ul><li id=i1><li id=i2></ul>
<script>
const i1=1,i2=2,i3=3,lm=3,um=333;
window.onload=st;
function st(){wa()/**/;wt()/**/}
function wa(){ih(i1,ml(0))}
function ml(n){var c='<ul>';for(var i=1;i<=lm;i++){var n2=(n*10+i);
c+='<li class=t id=l'+n2+'>'+n2+(n2<=um?'<li>'+ml(n2):'')}return c+'</ul>'}
function ih(n,c){id(n).innerHTML=c}
function id(n){return document.getElementById('i'+n)}
////////textbox///////
function wt(){ih(i2,'<textarea id=i'+i3+' onkeyup=oku() placeholder=1〜3333のIDを半角入力し改行></textarea>')}
function oku(){var n=gv(i3);if(0<n.indexOf('\n')){n=n.replace('\n','');id(i1).scrollTop=0;
location.href='#l'+n;id(i1).scrollBy(0,0-(n<10?0:n<100?25:n<1000?50:75));wv(i3,'')}id(i3).focus()}
function gv(n){return id(n).value}
function wv(n,v){id(n).value=v}
//////////////////////
</script>
</body>
メモ張にコピペしてdesktopに「stk.html」で保存。