Держите элемент ap прикрепленным к h2, когда изменение размера элемента p не происходит - PullRequest
Новая
       6

Держите элемент ap прикрепленным к h2, когда изменение размера элемента p не происходит

0 голосов
/ 06 июня 2018 

.uvc-main-heading p {
  position: relative;
  left: -8%;
  transform: rotate(-20deg)
}
<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>

Это позиционирует его там, где я хочу, но когда я изменяю размер браузера, новый элемент перемещается вместе с ним, и я хочу, чтобы он оставался на своем месте,но все же прокручиваю с остальными.

Веб-сайт на рабочем столе

Веб-сайт на мобильном телефоне

Я знаю, что могу использовать CSS и медиа-запросы для выполнения каждой точки останова,но я пытаюсь найти лучшее решение

Спасибо

1 Ответ

0 голосов
/ 06 июня 2018

Почему бы просто не переместить новый тег внутрь заголовка и расположить его абсолютно в заголовке, тогда его положение не изменится по отношению к заголовку: 

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%);
}
<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>
...