Position Sticky Css

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 an

Solution 1:

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: 5px12px6px12px!important;
  border-radius: 7.5px!important;
  box-shadow: 01px0.5pxrgba(0, 0, 0, 0.13)!important;
  text-shadow: 01px0rgba(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;
}

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