POSITION STICKY CSS

Question

Following exactly the example below, can someone help me to work the position: sticky

Today, the next date is positioning itself above the current date.

In this way, the opacity and shadow of the date is getting 100%, generating a grotesque vision if there are many dates.

I want the previous date, scroll up and give way to the next date.

All in CSS

        * {
            margin: 0px;
            padding: 0px;
        }
        
        .chat {
            overflow: auto;
            border: solid 1px black;
            position: fixed;
            left: 50%;
            top: 50%;
            background-color: #e5ddd5;
            z-index: 100;
            height: 500px;
            margin-top: -200px;
            width: 500px;
            margin-left: -300px;
        }
        
        .box {
            width: 300px;
            margin: 30px auto;
            padding: 20px;
            text-align: center;
            font-weight: 400;
            color: black;
            font-family: arial;
            position: relative;
            border-radius: 20px;
        }
        
        .box.enviado {
            background: #dcf8c6;
        }
        
        .box.recebido {
            background: white;
        }
        
        .recebido:before {
            content: "";
            width: 0px;
            height: 0px;
            position: absolute;
            border-left: 10px solid white;
            border-right: 10px solid transparent;
            border-top: 10px solid white;
            border-bottom: 10px solid transparent;
            left: 19px;
            bottom: -19px;
        }
        
        .enviado:before {
            content: "";
            width: 0px;
            height: 0px;
            position: absolute;
            border-left: 10px solid transparent;
            border-right: 10px solid #dcf8c6;
            border-top: 10px solid #dcf8c6;
            border-bottom: 10px solid transparent;
            right: 19px;
            bottom: -19px;
        }
        
        .data {
            background-color: rgba(225, 245, 254, 0.92);
            color: rgba(69, 90, 100, 0.95)!important;
            padding: 5px 12px 6px 12px!important;
            border-radius: 7.5px!important;
            box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13)!important;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4)!important;
            margin-bottom: 8px!important;
            margin-top: 8px!important;
            margin-right: auto!important;
            margin-left: auto!important;
            max-width: 75px;
            opacity: 0.8;
            z-index: 2;
        }
        
        .data {
            top: 10px;
            position: sticky;
        }

  <html> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="sticky">
        <meta name="viewport" content="width=device-width">
    </head>
    
    <body>
        <div class="chat">
            <div class="data">05/03/2019</div>
            <div class="box recebido">Olá</div>
            <div class="box enviado">Oi, tudo bem ?</div>
            <div class="data">06/03/2019</div>
            <div class="box recebido">Tudo bem!</div>
            <div class="box recebido">e voce ?</div>
            <div class="box enviado">Tudo bem tambem</div>
            <div class="box recebido">preciso de ajuda</div>
            <div class="box recebido">Voce pode me ajudar</div>
            <div class="data">07/03/2019</div>
            <div class="box enviado">Talvez sim</div>
            <div class="box enviado">O que voce precisa</div>
            <div class="box recebido">Como posso utilizar o position:sticky ?</div>
            <div class="box enviado">Deixe-me ver</div>
            <div class="box enviado">Acho que posso te ajudar</div>
            <div class="box recebido">Certo</div>
        </div>
    </body>  
    </html>

What you're seeing is expected behavior, it's doing just what you're telling it too. With `sticky` on each `.data` element they're ALL going to "stick" to the top when the document boundary is reached and render in accordance to their `z-index` based on their order in the DOM. The reason you're seeing the overlay is simply because of the alpha channel transparency on the `background-color` and the `opacity` set with your `.data` class. Remove those and it looks as you intend. If you want the previous to remove itself, that takes more effort with javascript. — Chris W., Mar 07 '19 at 22:11
I really want the previous one to disappear. If really need javascript, fine. Can you help me ? — Wagner Fillio, Mar 07 '19 at 22:14
"If really need javascript, fine. Can you help me" - would love to amigo, but go ahead and give it a try on your own first and come on back when you're stuck. Cheers! — Chris W., Mar 07 '19 at 22:51

score 2 · Accepted Answer · answered Mar 07 '19 at 22:16

If you want to avoid such overlap you need to consider more container where you wrap each date add its messages in the same container. Doing this, the previous day will scroll before the next one become sticky

* {
  margin: 0px;
  padding: 0px;
}

.chat {
  overflow: auto;
  border: solid 1px black;
  left: 50%;
  background-color: #e5ddd5;
  z-index: 100;
  height: 500px;
  width: 500px;
}

.box {
  width: 300px;
  margin: 30px auto;
  padding: 20px;
  text-align: center;
  font-weight: 400;
  color: black;
  font-family: arial;
  position: relative;
  border-radius: 20px;
}

.box.enviado {
  background: #dcf8c6;
}

.box.recebido {
  background: white;
}

.recebido:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid white;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  border-bottom: 10px solid transparent;
  left: 19px;
  bottom: -19px;
}

.enviado:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid #dcf8c6;
  border-top: 10px solid #dcf8c6;
  border-bottom: 10px solid transparent;
  right: 19px;
  bottom: -19px;
}

.data {
  background-color: rgba(225, 245, 254, 0.92);
  color: rgba(69, 90, 100, 0.95)!important;
  padding: 5px 12px 6px 12px!important;
  border-radius: 7.5px!important;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13)!important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4)!important;
  margin-bottom: 8px!important;
  margin-top: 8px!important;
  margin-right: auto!important;
  margin-left: auto!important;
  max-width: 75px;
  opacity: 0.8;
  z-index: 2;
}

.data {
  top: 10px;
  position: sticky;
}

<div class="chat">
  <div>
    <div class="data">05/03/2019</div>
    <div class="box recebido">Olá</div>
    <div class="box enviado">Oi, tudo bem ?</div>
  </div>
  <div>
    <div class="data">06/03/2019</div>
    <div class="box recebido">Tudo bem!</div>
    <div class="box recebido">e voce ?</div>
    <div class="box enviado">Tudo bem tambem</div>
    <div class="box recebido">preciso de ajuda</div>
    <div class="box recebido">Voce pode me ajudar</div>
  </div>
  <div>
    <div class="data">07/03/2019</div>
    <div class="box enviado">Talvez sim</div>
    <div class="box enviado">O que voce precisa</div>
    <div class="box recebido">Como posso utilizar o position:sticky ?</div>
    <div class="box enviado">Deixe-me ver</div>
    <div class="box enviado">Acho que posso te ajudar</div>
    <div class="box recebido">Certo</div>
  </div>
</div>

I understand, separate the div into date and dialog, but for this, I will have to change a lot of javascript code, since I'm tempting the server. — Wagner Fillio, Mar 07 '19 at 22:20

POSITION STICKY CSS

1 Answers1

Linked