javascript - 位置粘性不重叠

Question

我想创建某种聊天方式，例如 WhatsApp。我的问题是，当我为今天、昨天、某个日期等日期设置元素时，我需要保持粘性

问题是 div 重叠了

我不能用容器包装同一日期的元素，因为它们是动态的，我从 JSON/ajax 调用中将它们作为单独的元素获取，进行了一些 javascript 操作，然后将它们附加到末尾

我做了一个codepen - https:// codepen .io/sunco/pen/WNJMYmV

当你打开它时，滚动条会转到底部，你可以看到日期 div 重叠的问题

Answer 1

您需要为每个位置的粘性元素添加一个容器，并将 position: relative 添加到容器中，如下所示:

body {
    background-color: #f1eadb;
}

.fecha {
    background-color: #dda8a8;
    width: fit-content;
    border-radius: 3px;
    padding: 2px;
    position: sticky;
    top: 0px;
}

.container {
    position: relative
}

<div class="container">
<div class="fecha">2022-09-20</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>

<p>Aenean massa.</p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

<p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
</div>
<div class="container">
<div class="fecha">2022-09-21</div>
<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>

<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>

<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</p>

<p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.</p>

<p>Nam eget dui. Etiam rhoncus.</p>

<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>

<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p>
    </div>
<div class="container">
<div class="fecha">2022-09-22</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
<div class="container">
<div class="fecha">2022-09-23</div>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>

<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>

<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div class="container">
<div class="fecha">2022-09-24</div>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>

<p>Et harum quidem rerum facilis est et expedita distinctio.</p>

<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere</p>
</div>
<div class="container">
<div class="fecha">2022-09-25</div>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.</p>

<p>Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>

<p>Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.</p>

<p>Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>

<p>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>

<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.</p>
</div>
<div class="container">
<div class="fecha">2022-09-26</div>
<p>Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>

<p>It va esser tam simplic quam Occidental in fact, it va esser Occidental.</p>

<p>A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>

<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.</p>
</div>
<div class="container">
<div class="fecha">yesterday</div>

<p>Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</p>

<p>Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.</p>

<p>Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.</p>

<p>At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
</div>
<div class="container">
<div class="fecha">today</div>

<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados.</p>

<p>Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>

<p>Un riachuelo llamado Pons fluye por su pueblo y los abastece con las normas necesarias.</p>

<p>Hablamos de un país paraisomático en el que a uno le caen pedazos de frases asadas en la boca.</p>

<p>Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica.</p>

<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados.</p>

<p>Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>

<p>Un riachuelo llamado Pons fluye por su pueblo y los abastece con las normas necesarias.</p>

<p>Hablamos de un país paraisomático en el que a uno le caen pedazos de frases asadas en la boca.</p>

<p>Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica.</p>

<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados.</p>

<p>Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>

<p>Un riachuelo llamado Pons fluye por su pueblo y los abastece con las normas necesarias.</p>

<p>Hablamos de un país paraisomático en el que a uno le caen pedazos de frases asadas en la boca.</p>

<p>Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica.</p>

<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados.</p>

<p>Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>

<p>Un riachuelo llamado Pons fluye por su pueblo y los abastece con las normas necesarias.</p>

<p>Hablamos de un país paraisomático en el que a uno le caen pedazos de frases asadas en la boca.</p>

<p>Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica.</p>

<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados.</p>

<p>Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>

<p>Un riachuelo llamado Pons fluye por su pueblo y los abastece con las normas necesarias.</p>

<p>Hablamos de un país paraisomático en el que a uno le caen pedazos de frases asadas en la boca.</p>

<p>Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica.</p>

<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados.</p>

<p>Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas.</p>

<p>Un riachuelo llamado Pons fluye por su pueblo y los abastece con las normas necesarias.</p>

<p>Hablamos de un país paraisomático en el que a uno le caen pedazos de frases asadas en la boca.</p>

<p>Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica.</p>
</div>