Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Problem with multiple sticky element in html-css

Tags:

html

css

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

like image 889
carl johnson Avatar asked Sep 14 '25 19:09

carl johnson

1 Answers

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>
like image 82
Facundo Corradini Avatar answered Sep 17 '25 11:09

Facundo Corradini
Sign in to Comment

Related questions

SyntaxError: missing formal parameter
textarea unexplained spacing
Why DirectoryIndex index.php index.html is not working?
Does a grid layout override a display:none property of its items?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!