margin-top: сдвинуть элемент на текщую высоту

Question

Не знаем высоту блока, но блок необходимо сдвинуть вверх на столько, какова текущая высота. Такое возможно?

: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>

Так к примеру, чем больше высота родителя, тем больше выглядывает синий блок из под красного фона. То есть я пытаюсь выполнить смещение блока через margin-top, относительно той высоты которую выставил на этот самый блок.

В итоге получаю, неравномерное смещение. Почему так и как быть когда нельзя прибегнуть к обсолютному позиционированию.

Answer 1

вы что-то явно не то делаете. Если это коммерческий проект и за это вам должны что-то заплатить, то за Cumulative Layout Shift сайт снижают в рейтинге выдачи. Решается это через JS. После того как браузер отрисовывает вашу большую картинку вы отлавливаете это событие по

image.onload = function(){
    //display ok
}

и в эту функцию задаете стиль смещения для нижнего объекта. Но это явно какая-то дикость... могу дать вам несколько причин почему это плохая идея, и лучше решать как-то иначе.

БЛОГ НА HUSL

margin-top: сдвинуть элемент на текщую высоту

Ответы (1 шт):