在部分中定位相对和绝对 - 相对部分相互干扰？答案

【问题标题】：Position Relative & Absolute in Sections - Relative Sections Interfere with each other?在部分中定位相对和绝对 - 相对部分相互干扰？
【发布时间】：2020-02-23 22:19:40
【问题描述】：

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

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

检查下面的 sn-p 以供参考。

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

【问题讨论】：

标签： html css css-position absolute

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您可以通过 flexbox 和对您的右/左类进行一些小的改动来做到这一点。

我将.left 和.right 类附加到您的.content-wrappers 以指示位置，以帮助减少样式规则并提供更简洁的方法。希望对您有所帮助！

示例

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

其他资源

【讨论】：