[css]overflow:hidden;内でposition:sticky;をやっていく方法

代替案というかチューニングの話。

overflow:hidden;内でposition:sticky;は使えない

こんな感じに組んだとする。

<div class="wrap">
    <div class="set">
        <div class="sticky"></div>
    </div>
    <div class="set"></div>
</div>

.wrap{
    overflow: hidden;
    .set{
        .sticky{
            position: sticky;
            top: 0;
        }
    }
}

このとき、overflowとpositionが干渉してstickyが効かなくなる。

overflow:hidden;を付与した子要素でposition:stickyは使えない。

バグでなく仕様であると知ることから始まる。

.wrap{
    overflow: clip;
    .set{
        .sticky{
            position: sticky;
            top: 0;
        }
    }
}

hiddenをclipに変える。

これだけでOK。

疑似要素で装飾したいときとか、割とある状況だから知っておくのが良いですね。