无法修改HTML，如何基于H2高度设置absolute元素位置使其居H2上方？

需要让类名为pgafu-post-categories的元素显示在对应<h2>标签的上方一行，且适配<h2>内容的不同长度（比如单行、多行）。目前的CSS和HTML结构如下，且无法修改HTML代码，询问是否仅通过CSS实现，或通过JS/jQuery获取<h2>高度后调整定位。

现有CSS代码：

.pgafu-post-categories {
  position: absolute;
  top: -82px;
  width: fit-content;
  white-space: nowrap;
  padding: 4px 16px;
  font-size: 14px;
}

对应的HTML结构：

<div class="row">
  <div class="column">
    <div class="image-wrapper"></div>
    <h2>Small title</h2>
    <div class="pgafu-post-categories">category</div>
  </div>

  <div class="column">
    <div class="image-wrapper"></div>
    <h2>Long two <br> lines title</h2>
    <div class="pgafu-post-categories">category</div>
  </div>
</div>

方案一：纯CSS实现（无需JS） #

核心是给父容器.column设置相对定位，再用transform灵活调整分类标签的位置，不用硬写固定的top值，自动适配h2的高度。

修改后的CSS代码：

/* 给分类标签提供定位参考容器 */
.column {
  position: relative;
  padding-top: 30px; /* 预留标签空间，避免和上方图片重叠 */
}

.pgafu-post-categories {
  position: absolute;
  top: auto; /* 删掉原来固定的top值 */
  width: fit-content;
  white-space: nowrap;
  padding: 4px 16px;
  font-size: 14px;
  /* 向上移动自身高度+和h2的间距（8px可按需调整） */
  transform: translateY(calc(-100% - 8px));
}

/* 清除h2默认margin，保证间距稳定 */
.column h2 {
  margin-top: 0;
}

这样不管h2是单行还是多行，分类标签都会刚好落在它正上方，不用计算h2的具体高度，兼容性也不错。

方案二：JS/jQuery动态计算定位 #

如果担心旧浏览器不支持calc，可以用JS动态获取h2的高度，再调整标签位置：

jQuery版本 #

$(document).ready(function() {
  adjustCategories();
  // 窗口缩放时重新计算
  $(window).resize(adjustCategories);
});

function adjustCategories() {
  $('.column').each(function() {
    const h2Height = $(this).find('h2').outerHeight();
    const spacing = 8; // 标签和h2的间距，可改
    $(this).find('.pgafu-post-categories').css('top', `-${h2Height + spacing}px`);
  });
}

原生JS版本 #

document.addEventListener('DOMContentLoaded', function() {
  adjustCategories();
  window.addEventListener('resize', adjustCategories);
});

function adjustCategories() {
  document.querySelectorAll('.column').forEach(column => {
    const h2 = column.querySelector('h2');
    const category = column.querySelector('.pgafu-post-categories');
    if (h2 && category) {
      const spacing = 8;
      category.style.top = `-${h2.offsetHeight + spacing}px`;
    }
  });
}

这个方法会实时计算每个h2的高度，加上自定义间距后，把标签往上移对应距离，适配各种h2高度变化。

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