Задать переменную с положительным значением, а затем

Рейтинг: 0Ответов: 1Опубликовано: 24.01.2023
--hd: clamp(45px, 8%, 90px);

Есть данная переменна, вопрос в том, как применить ее но уже в отрицательном значении?

height:var(--hd);

Так положительно задаем значение, а необходимо отрицательно. То есть необходимо сдвинуть блок на верх через margin

margin-top:-var(--hd);

Как блок сдвинуть отрицательно блок так, чтобы было смещение нижних блоков.

:root {
  --hd: clamp(45px, 8%, 90px);
}

.rd {
   width: 200px;
   height: 1000px;
}

.block {
    background-color: #f00;
    position: relative;
    height: 100%;
    z-index: 1;
}
.child {
    height: var(--hd);
    background-color: #00f;
    margin-top: calc(var(--hd) * -1);
}
<div class='rd'>
   <div class="block"></div>
   <div class="child"></div>
</div>

css html html5 css3
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Пример

:root {
  --hd: 25px;
}

body {
  padding: 3rem;
  display: flex;
  gap: 1rem;
}

.block {
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.child {
  width: 100px;
  height: 100px;
  background-color: #00f;
  margin-top: var(--hd)
}

.block--custom .child {
  margin-top: calc(var(--hd) * -1);
}
<div class="block">
  <div class="child"></div>
</div>

<div class="block block--custom">
  <div class="child"></div>
</div>