Question

＆＃13;

.uvc-main-heading p {
  position: relative;
  left: -8%;
  transform: rotate(-20deg)
}

＆＃13;

<div class="uvc-main-heading ult-responsive">
  <p style="text-decoration:underline;font-weight:bold;color:#800000;">NEW</p>
</div>
<div class="uvc-main-heading ult-responsive">
  <h2 style="font-weight:bold;color:#000000;">Open Stock</h2>
</div>

＆＃13;

这将它定位在我想要的位置，但是当我调整浏览器的大小时，NEW元素随之移动，我希望它保持原位，但仍然可以滚动其余部分。

Website on Desktop

Website on Mobile

我知道我可以使用CSS和媒体查询来执行每个断点，但我正在尝试找到更好的解决方案

谢谢

Answer 1

为什么不在标题内移动新标签并将其绝对定位到标题，相对于标题，它的位置不会改变：

＆＃13;

body {
  text-align: center;  /* for test only */
}

.uvc-main-heading {
  position: relative;    /* position new absolutely to this */
  display: inline-block; /* for test (so you can see it centred */
}

.uvc-main-heading p {
  /* position this absolutely */
  position: absolute;
  top: 0;
  left: 0;

  /* translation moves it left 25% it's ownb width and 100% up it's own height */
  transform: rotate(-20deg) translate(-25%, -100%);
}

＆＃13;

<div class="uvc-main-heading ult-responsive">
  <h2 style="font-weight:bold;color:#000000;">Open Stock</h2>
  <p style="text-decoration:underline;font-weight:bold;color:#800000;">NEW</p>
</div>

＆＃13;

当调整p元素的大小不移动时，保持p元素附加到h2

1 个答案: