css - 如何使用 CSS 相对于标题定位我的元素

Question

所以在编码方面我是个新手，我整天都在尝试将 elementor-post__badge 元素放置在标题文本的顶部。问题是我希望这个定位相对于标题，因此所有移动设备的位置都是相同的。我怎样才能做到这一点？我尝试了以下代码，但它不起作用，并且徽章元素的位置因设备而异：

@media only screen and (max-width: 767.98px) {
  #parent {
    position: relative;
  }

  .elementor-post__badge {
    position: absolute;
    top: 178px !important;
    left: -14px;
    font-size: 12px !important;
  }
}

这就是我试图通过标题顶部的“新闻”徽章来实现的目标，但它不适用于所有设备

标签： csswordpresspositionabsoluteelementor

Answer 1

尝试使用其他度量单位，用于表示页面宽度和高度的百分比，例如，、、vw和vh，em而不是px。查看器宽度/高度的变化是导致跨浏览器和设备的某些元素对齐不一致的原因。

https://www.w3.org/Style/Examples/007/units.en.html