CSS伪元素:before三角形随div内容变大偏移问题求助

我来帮你捋清楚这个问题出在哪，以及怎么快速修复：

为啥三角形会跑到容器内部？ #

你的#bellnews是fixed定位的容器，但伪元素:before默认是inline/inline-block级元素，它的位置是跟着父元素的内容流走的，不是盯着容器的边界来定位。当容器里的内容变多、高度超过min-height时，内容会向下撑开容器，伪元素就会被内容“挤”到容器内部，而不是乖乖待在容器顶部外侧。

另外，你没给伪元素设置脱离文档流的定位方式，它默认会跟着内容一起布局，自然没法固定在你想要的位置。

修复方案：让伪元素“盯紧”容器边界 #

只需要调整伪元素的定位规则，让它脱离内容流，直接以#bellnews容器为基准定位就行：

修改后的代码示例 #

#bellnews {
  position: fixed;
  width: 140px;
  min-height:100px;
  max-height:400px;
  background: #fff;
  color: #000;
  border:1px solid #ccc;
  z-index:3000;
  /* 明确伪元素以这个容器为定位基准，fixed本身也支持，但加上更稳妥 */
  position: relative;
}

#bellnews:before {
  content: '';
  /* 让伪元素脱离正常内容流，不再跟着内容跑 */
  position: absolute;
  /* 定位到容器顶部外侧，数值根据三角形大小调整 */
  top: -10px;
  left: 50%;
  /* 水平居中对齐 */
  transform: translateX(-50%);
  /* 用border绘制三角形（这里是示例，你可以调整颜色和尺寸） */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
}

核心调整说明 #

• 给伪元素加position: absolute：让它跳出内容流，不再受容器内内容多少的影响。
• 用top: -10px把三角形“拉”到容器外面（数值和三角形高度一致），再用left: 50%+transform: translateX(-50%)实现水平居中。
• 父元素加position: relative：明确告诉伪元素“就以我为定位基准”，避免出现意外的定位偏差。

这样不管容器里的内容多还是少，三角形都会精准固定在容器的顶部外侧，不会再乱跑啦。

内容的提问来源于stack exchange，提问作者RGS