Solution 1 :

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>

Solution 2 :

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>

Problem :

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

Comments

Comment posted by metaDesign

What exactly do you want to happen? Have the sticky date be replaced as you scroll down?

Comment posted by codepen.io/trymedo/pen/YXWvOo

Have a look at this

Comment posted by pure CSS multiple stacked position sticky?

Does this answer your question?

Comment posted by carl johnson

@metaDesign Yes, previous sticky element must be replaced with the new sticky element instead of overlapping.

Comment posted by metaDesign

@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

Comment posted by sticky

I don’t know why

Comment posted by carl johnson

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

Comment posted by sticky

It still overlapping one another. You cheated by adding

Comment posted by Hardi Shah

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.

Comment posted by sticky example

Why are you not saying about

Comment posted by carl johnson

and again

Comment posted by code-pen

@HardiShah

By