标题组件与店铺容器间距异常：如何设置15px间距并解决内容截断问题？

.shop-cont 使用 position: absolute 后会脱离正常文档流，完全不受.dialog-title的外边距影响，再加上你设置了top: -2px，会让它向上偏移，直接和标题区域重叠，导致内容被截断、间距消失的现象。

方案一：移除绝对定位（推荐） #

如果.shop-cont不需要绝对定位的特性，直接去掉定位属性，利用普通流的margin控制间距：

$dialog-title-margin: 0 0 15px; // 直接设置底部外边距为你要的15px间距

.dialog-title {
  margin: $dialog-title-margin;
}

.shop-cont {
  // 删掉 position: absolute、top、right
  // 如果需要右对齐，改用下面的属性
  margin-left: auto;
}

这种方式符合CSS常规布局逻辑，间距会稳定生效，不会出现定位导致的重叠问题。

方案二：保留绝对定位，调整定位规则 #

如果必须用绝对定位，需要给父容器添加相对定位，再通过计算定位值实现间距：

// 给包裹两个组件的父容器加相对定位
.dialog-wrapper {
  position: relative;
  overflow: hidden; // 解决子元素margin溢出问题，确保父容器高度包含标题的底部外边距
}

.dialog-title {
  margin: 0 0 15px; // 设置标题底部间距为15px
}

.shop-cont {
  position: absolute;
  top: 100%; // 定位到父容器底部，刚好和标题形成15px间距
  right: 0;
}

如果标题高度固定，也可以直接计算top值：

$title-height: 24px; // 替换成你标题的实际高度
$gap: 15px;

.dialog-wrapper {
  position: relative;
}

.dialog-title {
  height: $title-height;
  margin: 0 0 $gap;
}

.shop-cont {
  position: absolute;
  top: calc(#{$title-height} + #{$gap});
  right: 0;
}

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