[Solved] POSITION STICKY CSS

by


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>

2

solved POSITION STICKY CSS