将孩子置于父母上方

Question

我有以下模板：

<div class="messages">

  <ul class='messages__list'> // display: flex ******EDIT****** flex-direction: column

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">

      <span class="message-full-date">date</span> // position: fixed, left: 45%;

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

  </ul>

</div>

我想将跨度（完整日期）放置在“li”上方的“行”中 - 这样它们就不会在小屏幕上彼此重叠。有办法做到吗？

我尝试以不同的方式定位其他元素（绝对、相对、固定），并以不同的方式显示它们，但这对我不起作用。

我还尝试使用 css "::after"/"::before' 但也失败了..

Answer 1

您可以依靠相对/绝对位置来使用父级作为参考。例子 ：.messages__list__item {&nbsp; position: relative;&nbsp; margin-top: 1.2em;}.message-full-date {&nbsp; position: absolute;&nbsp; bottom: 100%;&nbsp; left: 0;&nbsp; right: 0;&nbsp; width: max-content;&nbsp; margin: auto;}.flex {display:flex;}.flex li {flex:1}/* see us */li , .message-full-date{border:solid 1px;}<div class="messages">&nbsp; <ul class='messages__list'>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item">&nbsp; &nbsp; &nbsp; <span class="message-full-date">date</span>&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item">&nbsp; &nbsp; &nbsp; <span class="message-full-date">date</span>&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; </ul></div><div class="messages">&nbsp; <ul class='messages__list flex '>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item">&nbsp; &nbsp; &nbsp; <span class="message-full-date">date</span>&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item">&nbsp; &nbsp; &nbsp; <span class="message-full-date">date</span>&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item">&nbsp; &nbsp; &nbsp; <span class="message-full-date">date</span>&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item">&nbsp; &nbsp; &nbsp; <span class="message-full-date">date</span>&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item">&nbsp; &nbsp; &nbsp; <span class="message-full-date">date</span>&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; </ul></div>如果必须显示日期，您还可以使用 ::before 伪值来生成此容器li.message-full-date:not([data-date=""]) {&nbsp; margin: 2px 0 0 0;/* possibly useful */}.flex li.message-full-date:not([data-date=""]) {&nbsp; margin: 0 0 0 2px ;/* possibly useful */}.message-full-date:not([data-date=""])::before {&nbsp; content: 'date :'attr(data-date);&nbsp; display: block;&nbsp; width: max-content;&nbsp; margin: auto;}.flex {&nbsp; display: flex;}.flex li {&nbsp; flex: 1}/* see us */li,.message-full-date::before {&nbsp; border: solid 1px;}<div class="messages">&nbsp; <ul class='messages__list'>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item&nbsp; message-full-date" data-date="01/01/01">&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; </ul></div><div class="messages">&nbsp; <ul class='messages__list flex'>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item&nbsp; message-full-date" data-date="01/01/01">&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item&nbsp; message-full-date" data-date="">&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li *ngFor="let msg of currConversation.messages" class="messages__list__item&nbsp; message-full-date" data-date="01/02/01">&nbsp; &nbsp; &nbsp; <p class="message message-name">name</p>&nbsp; &nbsp; &nbsp; <p class="message message-content">content</p>&nbsp; &nbsp; </li>&nbsp; </ul></div>