CSS position sticky

Date: 2024-02-09
<style>
.parent {
    position: relative;
    overflow: auto; /* or made otherwise scrollable */
}

.with-a-size {
    display: grid;
    width: 100%;
    height: 100%;
}

.sticky-element {
    position: sticky;
    top: 0; /* !important: first set relative position: top|right|bottom|left */
    z-index: 100; /* correct to flow above the content scrolled up */
}
</style>

<div class="parent with-a-size">
    <div class="sticky-element">ABC</div>
    <div class="other-elements">
        content
    </div>
</div>

82720cookie-checkCSS position sticky