Относительная и абсолютная позиция в разделах - Относительные разделы мешают друг другу? - PullRequest
Новая
       31

Относительная и абсолютная позиция в разделах - Относительные разделы мешают друг другу?

0 голосов
/ 23 февраля 2020

Я пытался создать чат с парой сообщений. Я использовал относительные обертки сообщений, содержащие раздел изображения с абсолютной позицией и текст сообщения с абсолютной позицией. Однако по какой-то причине каждая относительная оболочка сообщений обрезается на свою.

Кто-нибудь знает, как это исправить?

Проверьте фрагмент ниже для справки. 

.message-wrapper {
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
}

.profile-image-section-left {
  margin-right: 10px;
  position: relative;
}

.message-content-left {
  background: black;
  max-width: 500px;
  padding: 9px;
  color: #fff;
  position: relative;
  left: 50px;
  top: -15px;
}

.profile-image {
  width: 40px;
  height: 40px;
  border-radius: 30px;
}

.profile-image-section-right {
  margin-left: 10px;
  position: absolute;
  right: 10px;
}

.message-content-right {
  background-color: black;
  padding: 9px;
  color: #fff;
  position: absolute;
  right: 70px;
  top: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="message-wrapper">
    <span class="profile-image-section-left">
                <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
            </span>
    <div class="message-content-left">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
  <div class="message-wrapper">
    <span class="profile-image-section-right">
                <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
            </span>
    <div class="message-content-right">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
  <div class="message-wrapper">
    <span class="profile-image-section-left">
                <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
            </span>
    <div class="message-content-left">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
</div>

Ответы [ 2 ]

2 голосов
/ 23 февраля 2020

Сначала вы должны узнать каждое значение позиции в CSS:

  • Stati c: не позиционировано
  • Относительно: позиционировано относительно своего нормального положения
  • Абсолют: позиционируется относительно ближайшего позиционируемого предка
  • Исправлено: позиционируется относительно окна браузера
  • Важно: изменения между фиксированным и относительным

Обратите внимание, что если вы используете абсолютную позицию, она должна быть внутри относительного, фиксированного или закрепленного элемента, поэтому вам следует убедиться в этом.

1 голос
/ 23 февраля 2020

Вы можете сделать это с flexbox и некоторыми незначительными изменениями в ваших правых / левых классах.

Я прикрепил .left и .right класс к вашим .content-wrapper s указать положение, чтобы помочь уменьшить правила стиля и предложить более чистый подход. Надеюсь, это поможет вам!

Пример 

.message-wrapper {
  margin-bottom: 10px;
  position: relative;
  display: flex;
}

.message-wrapper.left {
  flex-direction: row;
}

.message-wrapper.right {
  flex-direction: row-reverse;
}

.profile-image {
  width: 40px;
  height: 40px;
  border-radius: 30px;
}

.profile-image-section {
  margin: 0 10px;
}

.message-content {
  background: black;
  max-width: 500px;
  padding: 9px;
  color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="message-wrapper left">
    <span class="profile-image-section">
        <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
    </span>
    <div class="message-content">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
  <div class="message-wrapper right">
    <span class="profile-image-section">
        <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
    </span>
    <div class="message-content">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
  <div class="message-wrapper left">
    <span class="profile-image-section">
        <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
    </span>
    <div class="message-content">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
</div>

Дополнительные ресурсы

...