Can someone assist me in implementing the position: sticky as demonstrated below?
Currently, the upcoming date overlaps the current date.
This causes the opacity and shadow of the date to reach 100%, which can create a cluttered appearance if there are multiple dates present.
I would like the previous date to scroll up and make way for the next one.
All of this should be achieved using CSS only.
* {
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>