部分中的相对位置和绝对位置 - 相对部分相互干扰？

Question

我尝试用几条消息创建聊天。我使用了包含绝对位置图片部分和绝对部分消息文本的相对消息包装器。但是，由于某种原因，每个相关的消息包装器都切入了不同的包装器。

有谁知道如何解决这个问题？

检查下面的代码片段以供参考。

.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>

Answer 1

您可以通过 flexbox 并对您的 right/left classes 进行一些小的改动来做到这一点。

我在您的 .content-wrapper 中附上了 .left 和 .right class 以指明位置，以帮助减少样式规则并提供更简洁的方法。希望这对您有所帮助！

例子

.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>

其他资源

Answer 2

您应该首先了解CSS中的每个位置值：

静态：未定位
相对：相对于其正常位置定位
绝对：相对于最近定位的祖先定位
固定：相对于浏览器定位window
粘性：固定和相对之间的变化

请注意，如果您使用绝对位置，它必须在相对、固定或粘性元素内，因此您应该确保这一点。

部分中的相对位置和绝对位置 - 相对部分相互干扰？

Position Relative & Absolute in Sections - Relative Sections Interfere with each other?

html

css

css-position

absolute

例子

其他资源