положение ребенка над родителем

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 {
  position: relative;
  margin-top: 1.2em;
}

.message-full-date {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  width: max-content;
  margin: auto;
}
.flex {display:flex;}
.flex li {flex:1}

/* see us */
li , .message-full-date{border:solid 1px;}

<div class="messages">
  <ul class='messages__list'>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>

  </ul>
</div>

<div class="messages">
  <ul class='messages__list flex '>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">
      <span class="message-full-date">date</span>
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
  </ul>
</div>

Вы также можете использовать псевдо: :: before для генерации этого контейнера, если должна быть показана дата

li.message-full-date:not([data-date=""]) {
  margin: 2px 0 0 0;/* possibly useful */
}
.flex li.message-full-date:not([data-date=""]) {
  margin: 0 0 0 2px ;/* possibly useful */
}

.message-full-date:not([data-date=""])::before {
  content: 'date :'attr(data-date);
  display: block;
  width: max-content;
  margin: auto;
}

.flex {
  display: flex;
}

.flex li {
  flex: 1
}


/* see us */

li,
.message-full-date::before {
  border: solid 1px;
}

<div class="messages">
  <ul class='messages__list'>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="01/01/01">
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>

  </ul>
</div>

<div class="messages">
  <ul class='messages__list flex'>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="01/01/01">
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="">
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="01/02/01">
      <p class="message message-name">name</p>
      <p class="message message-content">content</p>
    </li>
  </ul>
</div>