私有聊天气泡重叠问题求助，求CSS布局修复方案

嘿，我一眼就看出问题所在了——你给.sent和.got这两个气泡类都用了position: absolute，这种定位会让元素脱离正常的文档流，所有消息气泡都会默认挤在同一个位置，新消息自然就会覆盖旧的。咱们换个布局思路就能搞定，同时还能保留左右对齐的效果：

第一步：给消息容器设置基础布局 #

首先，找到包裹所有聊天消息的父容器（比如你可能用了<div class="chat-box">或者类似的元素），给它加上这些样式，让消息能按顺序垂直排列：

.chat-box {
  display: flex;
  flex-direction: column;
  gap: 15px; /* 消息之间的间距，你可以根据自己的设计调整 */
  padding: 1rem;
  max-height: 80vh; /* 可选：给聊天框加个最大高度，超出后滚动 */
  overflow-y: auto;
}

第二步：修改气泡的样式，去掉绝对定位 #

把.sent和.got里的position: absolute删掉，改用flex的对齐属性来实现左右排列，同时保留气泡的三角装饰：

自己发送的消息（.sent） #

.sent {
  align-self: flex-end; /* 让气泡靠右对齐 */
  background: blue;
  color: white;
  width: fit-content;
  border-radius: .4em;
  max-width: 300px;
  font-size: 18px;
  padding: 8px 14px; /* 加内边距让文字不贴边 */
  position: relative; /* 给三角伪元素做定位基准 */
}

.sent:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 14px solid transparent;
  border-left-color: blue;
  border-right: 0;
  border-top: 0;
  margin-top: -7px;
  margin-right: -14px;
}

收到的消息（.got） #

.got {
  align-self: flex-start; /* 让气泡靠左对齐 */
  background: #e8e8e8;
  color: black;
  border-radius: .4em;
  max-width: 300px;
  width: fit-content;
  font-size: 18px;
  padding: 8px 14px;
  position: relative; /* 给三角伪元素做定位基准 */
}

.got:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 14px solid transparent;
  border-right-color: #e8e8e8;
  border-left: 0;
  border-top: 0;
  margin-top: -7px;
  margin-left: -14px;
}

原理说明 #

• 用flex布局的父容器会让每个消息气泡都处于正常文档流中，按顺序垂直排列，不会互相覆盖。
• align-self属性可以单独控制每个气泡的对齐方向，完美替代绝对定位的right/left实现左右布局。
• 保留position: relative是为了让气泡的三角伪元素能相对于气泡本身定位，不会跑到页面其他地方去。

这样修改后，你的聊天消息就会按顺序排列，新消息会自动出现在旧消息的下方，再也不会重叠啦！

内容的提问来源于stack exchange，提问作者A Repl User