时间戳

首页 > 解决方案 > 在部分中定位相对和绝对 - 相对部分相互干扰？

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

问题描述

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

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

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

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

标签： htmlcsscss-positionabsolute

解决方案

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

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

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

推荐阅读