如何让标题在任意屏幕尺寸下固定于div右上角？

一、核心布局方案：Relative + Absolute 定位 #

直接用你没尝试过的相对+绝对定位就能解决标题无法右移超过350px的问题，这是最直接的方案：

• 给包裹标题的容器（div或section）设置position: relative，作为标题的定位参考基准
• 给h2/h3/h4设置position: absolute; top: 0; right: 0;，让标题脱离文档流，直接固定在容器右上角，不受容器内其他元素布局限制

示例代码：

/* 容器基础样式 */
.content-wrap {
  position: relative;
  padding-right: 160px; /* 给标题预留空间，避免遮挡正文 */
  min-height: 70px; /* 确保容器高度足够容纳标题 */
  border: 1px solid #ddd; /* 方便查看容器范围，可删除 */
}

/* 标题定位样式 */
.content-wrap h2,
.content-wrap h3,
.content-wrap h4 {
  position: absolute;
  top: 8px; /* 调整顶部间距 */
  right: 8px; /* 调整右侧间距 */
  margin: 0; /* 清除默认外边距，避免干扰定位 */
  white-space: nowrap; /* 保持标题不换行（可选） */
  max-width: 300px; /* 限制标题最大宽度，防止溢出 */
  overflow: hidden;
  text-overflow: ellipsis; /* 标题过长时显示省略号 */
}

二、解决浏览器缩小时的溢出问题 #

在上述基础上，添加响应式适配逻辑：

• 通过max-width+overflow: hidden+text-overflow: ellipsis限制标题宽度，避免溢出
• 针对小视口（如移动端），用媒体查询调整标题的字体大小和位置：

@media (max-width: 768px) {
  .content-wrap h2,
  .content-wrap h3,
  .content-wrap h4 {
    font-size: 1.1rem;
    right: 5px;
    top: 5px;
    max-width: 200px;
  }
}

三、关于用section替代div的问题 #

section和div的核心差异是语义化：

• div是无语义的通用容器，仅用于布局包裹
• section代表页面中一个独立的内容区块（比如章节、主题段落），如果你的容器对应一个有独立主题的内容块，用section更符合HTML语义化规范，对SEO和无障碍访问更友好
• 从布局功能来说，section和div的表现完全一致，不影响定位效果，选择哪个取决于你的内容语义需求

补充：为什么之前的边距/尺寸方案无效？ #

默认文档流中，块级标题会占据整行宽度，位置受容器内边距、相邻元素布局限制，无法突破文档流的约束移到更靠右的位置。而绝对定位会让元素脱离文档流，直接基于参考容器定位，自然能解决这个问题。

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