Problem with multiple sticky element in html-css

Question

I have div's of class 'info' like <div class="info"><span>March 1 2020</span></div> and its css is -

.info{
       position:sticky;
       top:0;
   }

But all these div's are overlapping while scrolling.
How can I fix the overlapping problem ?
I means if new sticky element strikes the previous sticky element then previous sticky element should be go away like given in https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

        body {
            font-size: 1em;
            user-select: none;
            background-color: #e0e0e0;
            font-family: sans-serif;
            font-size: 100%;
        }
        /* multiple sticky element css --STARTS*/
        .info{
        position:sticky;
        top:0;
        }
        /* multiple sticky element css _______ENDS*/
        
        main {
            width: 50%;
            min-width: 550px;
            margin: 0 auto;
            background-color: #e0e0e0;
            height: 300px;
            overflow-y: scroll;
        }

        

        #wrap {
            padding: 5px;
            display: grid;
            grid-gap: 2px;
            position: relative;
            z-index: 1;
        }

        #wrap .right_wrap {
            width: 80%;
            padding-left: 20%;
            display: flex;
            justify-content: flex-end;
        }

        #wrap .left_wrap {
            display: flex;
            justify-content: flex-start;
            width: 80%;
        }

        .right_wrap .sms_section {
            background-color: #dbf4c6;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .left_wrap .sms_section {
            background-color: #f4f4f4;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .sms_section {
            display: grid;
            grid-template-columns: 1fr 48px;
        }

        .left_time,
        .right_time {
            grid-column: 2/3;
            grid-row: 2;
            margin-top: -6px;
        }

        #inpt {
            position: sticky;
            bottom: 0;
            text-align: left;
            background-color: #d0d0d0;
            padding: 5px 0 5px 5px;
            box-shadow: 0 0 20px -11px;
        }

        input[type='text'] {
            font-size: 16px;
            width: 80%;
            border-radius: 2px;
            border: none;
            padding: 5px;

        }

<body>
    <main>
        <section id="wrap">
            <div class="info"><span>March 1 2020</span></div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagejkjkjk kjkjkjjkk kjijiji kjkjkjkjkjkjkjkjkjkjkjkjjjkj kjkjkjkjkkkjkjkj </div>
                    <span class="left_time">
                        <code>4.06AM</code>
                    </span>
                </section>
                <!--.sms_section-->
            </div>
            <div class="info"><span>March 2 2020</span></div>
            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="info"><span>Yesterday</span></div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div id="inpt">
                <input type="text" placeholder="type here">

            </div>

        </section>
    </main>


</body>

Help here

What exactly do you want to happen? Have the sticky date be replaced as you scroll down? — metaDesign, Mar 04 '20 at 11:35
Does this answer your question? [pure CSS multiple stacked position sticky?](https://stackoverflow.com/questions/54689034/pure-css-multiple-stacked-position-sticky) — Bhavik Hirani, Mar 04 '20 at 11:40
@metaDesign Yes, previous sticky element must be replaced with the new sticky element instead of overlapping. — carl johnson, Mar 04 '20 at 11:43
@carljohnson A background color is a hacky way of achieving it, to actually replace it you'd need a bit of Javascript since CSS can't detect scroll events — metaDesign, Mar 04 '20 at 11:48

score 3 · Accepted Answer · answered Mar 04 '20 at 11:43

You need to create a container for each day set as position:relative for the sticky elements to anchor to.

.sticky-contain{
  position: relative;
}

body {
            font-size: 1em;
            user-select: none;
            background-color: #e0e0e0;
            font-family: sans-serif;
            font-size: 100%;
        }
        /* multiple sticky element css --STARTS*/
        .info{
        position:sticky;
        top:0;
        }
        /* multiple sticky element css _______ENDS*/
        
        main {
            width: 50%;
            min-width: 550px;
            margin: 0 auto;
            background-color: #e0e0e0;
            height: 300px;
            overflow-y: scroll;
        }

        

        #wrap {
            padding: 5px;
            display: grid;
            grid-gap: 2px;
            position: relative;
            z-index: 1;
        }

        #wrap .right_wrap {
            width: 80%;
            padding-left: 20%;
            display: flex;
            justify-content: flex-end;
        }

        #wrap .left_wrap {
            display: flex;
            justify-content: flex-start;
            width: 80%;
        }

        .right_wrap .sms_section {
            background-color: #dbf4c6;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .left_wrap .sms_section {
            background-color: #f4f4f4;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .sms_section {
            display: grid;
            grid-template-columns: 1fr 48px;
        }

        .left_time,
        .right_time {
            grid-column: 2/3;
            grid-row: 2;
            margin-top: -6px;
        }

        #inpt {
            position: sticky;
            bottom: 0;
            text-align: left;
            background-color: #d0d0d0;
            padding: 5px 0 5px 5px;
            box-shadow: 0 0 20px -11px;
        }

        input[type='text'] {
            font-size: 16px;
            width: 80%;
            border-radius: 2px;
            border: none;
            padding: 5px;

        }

<body>
    <main>
        <section id="wrap">
          <div class="sticky-contain">
            <div class="info"><span>March 1 2020</span></div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagejkjkjk kjkjkjjkk kjijiji kjkjkjkjkjkjkjkjkjkjkjkjjjkj kjkjkjkjkkkjkjkj </div>
                    <span class="left_time">
                        <code>4.06AM</code>
                    </span>
                </section>
                <!--.sms_section-->
            </div>
          </div>
          <div class="sticky-contain">

            <div class="info"><span>March 2 2020</span></div>
            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>
            
          </div>
          <div class="sticky-contain">

            <div class="info"><span>Yesterday</span></div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
        </div>
            <div id="inpt">
                <input type="text" placeholder="type here">

            </div>

        </section>
    </main>


</body>

I don't know why `@Hardi Shah` got upvote because her answer is not right. Your ans needs to be upvote. But if you see example given in [sticky](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning), you can see that they didn't add `position:relative` and still working. why so ? — carl johnson, Mar 04 '20 at 12:09
Okay I got it. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed **until it reaches the boundary of its parent**. — carl johnson, Mar 04 '20 at 14:03
@carljohnson thank you so much for that last comment. It really helped me with my own sticky subheaders implementation. — Jonathan Wilson, Jun 01 '23 at 18:00

score 1 · Answer 2 · answered Mar 04 '20 at 11:39

Added z-index and background color to the Info class.

        body {
            font-size: 1em;
            user-select: none;
            background-color: #e0e0e0;
            font-family: sans-serif;
            font-size: 100%;
        }
        /* multiple sticky element css --STARTS*/
        .info{
        position:sticky;
        top:0;
        background: #e0e0e0;
        z-index: 12;
        }
        /* multiple sticky element css _______ENDS*/
        
        main {
            width: 50%;
            min-width: 550px;
            margin: 0 auto;
            background-color: #e0e0e0;
            height: 300px;
            overflow-y: scroll;
        }

        

        #wrap {
            padding: 5px;
            display: grid;
            grid-gap: 2px;
            position: relative;
            z-index: 1;
        }

        #wrap .right_wrap {
            width: 80%;
            padding-left: 20%;
            display: flex;
            justify-content: flex-end;
        }

        #wrap .left_wrap {
            display: flex;
            justify-content: flex-start;
            width: 80%;
        }

        .right_wrap .sms_section {
            background-color: #dbf4c6;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .left_wrap .sms_section {
            background-color: #f4f4f4;
            border-radius: 7.5px;
            padding: 6px 7px 8px 9px;
        }

        .sms_section {
            display: grid;
            grid-template-columns: 1fr 48px;
        }

        .left_time,
        .right_time {
            grid-column: 2/3;
            grid-row: 2;
            margin-top: -6px;
        }

        #inpt {
            position: sticky;
            bottom: 0;
            text-align: left;
            background-color: #d0d0d0;
            padding: 5px 0 5px 5px;
            box-shadow: 0 0 20px -11px;
        }

        input[type='text'] {
            font-size: 16px;
            width: 80%;
            border-radius: 2px;
            border: none;
            padding: 5px;

        }

<body>
    <main>
        <section id="wrap">
            <div class="info"><span>March 1 2020</span></div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagemessage message messagejkjkjk kjkjkjjkk kjijiji kjkjkjkjkjkjkjkjkjkjkjkjjjkj kjkjkjkjkkkjkjkj </div>
                    <span class="left_time">
                        <code>4.06AM</code>
                    </span>
                </section>
                <!--.sms_section-->
            </div>
            <div class="info"><span>March 2 2020</span></div>
            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="left_wrap">
                <section class="sms_section">
                    <div class="left_sms">left message left message left message left message left message</div> <span class="left_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="info"><span>Yesterday</span></div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>
            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div class="right_wrap">
                <section class="sms_section">
                    <div class="right_sms">left message left message left message left message left message</div> <span class="right_time"><code>4.06AM</code></span>
                </section>
            </div>

            <div id="inpt">
                <input type="text" placeholder="type here">

            </div>

        </section>
    </main>


</body>

It still overlapping one another. You cheated by adding **background-color**. for example see [sticky](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning). In this link you can see sticky elements are not overlapping, they are replacing. — carl johnson, Mar 04 '20 at 11:49
Position sticky always overlaps the content, and background-color and z-index works to keep the content above from all rest of the content. Your purpose is fulfilled over here, and this is the right way to use position sticky. — Hardi Shah, Mar 04 '20 at 11:51
_"Your purpose is fulfilled over here"_, not yet see [sticky](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning). In this link you can see sticky elements are not overlapping as you gave the answer, they are replacing. _"Position sticky always overlaps the content"_ you are wrong according to the example given in the link. — carl johnson, Mar 04 '20 at 11:59
This link works same as I did. The intension of adding z-index is prevention of future overlapping issues. For your layout you can remove it if not needed. — Hardi Shah, Mar 04 '20 at 12:06
By just adding background-color is not a solution because it still overlap on each other and I want to solve the overlap problem. **I hope you understand now your answer is not correct.** — carl johnson, Mar 04 '20 at 12:27
I am getting votes because the answer is correct. Better do R&D on sticky from basics. Background is not cheat way..You can see the link you shared, they also use background color. When you are giving sticky css to any element like p tag or span tag.. you have to use background color — Hardi Shah, Mar 04 '20 at 12:28
Why are you not saying about **overlaping problem** in your solution. If you remove the `bg-color`in your solution then it shows how you add cheat. If your answer is correct then it must work without any bg-color like answered by `@Facundo Corradini`. If you don't use bg-color in [sticky example](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning) then it still work. see [code-pen](https://codepen.io/abhishekml/pen/gOpxNNJ).Try to remove bg-color in your solution then you can see the problem without any eye-lens. **I hope you understand now your ans is not correct** — carl johnson, Mar 04 '20 at 12:55
and again **Why are you not saying about overlaping problem in your solution ?** — carl johnson, Mar 04 '20 at 12:59
@HardiShah _Carl_ wants to solve the overlapping problem and overlapping problem is still in your solution. So please read question description again and If you think your answer is correct by just adding **bg-color** in _Carl_'s code then see again [code-pen](https://codepen.io/abhishekml/pen/gOpxNNJ) — Abhishek Kamal, Mar 04 '20 at 13:16

Problem with multiple sticky element in html-css

2 Answers2