Отслеживание положения элемента со значением absolute

Question

Есть вот такой элементарный пример функциональной задачи. Два блока, потомок имеет абсолютное позиционирование относительно родителя и размеры большие чем у него. Вылазит за края.

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

.absolute {
  position: absolute;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  z-index: -1;
  background-color: pink;
}

<div class="block">
  <div class="absolute"></div>
</div>

Вопрос - Как отслеживать что б потомок никогда не вылазил из области видимости экрана?

Как написать обработчик (а возможно и кто-то знает решение на CSS) которое б гарантировало, что при ресайзе окна браузера потомок (розовый блок) не уходил бы за область видимости. То есть как только область видимости приближается к блоку с 'position:absolute;' смещаться начинал его родитель и только когда область просмотра становилась бы меньше width: calc(100% + 40px); отображение б ломалось.

Ещё один пример для наглядности

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

.absolute {
  position: absolute;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  z-index: -1;
  background-color: pink;
}

<div class="block">
  <img class="absolute" src="https://placehold.co/340x340?text=Hello+World" alt="image">
</div>

При ресайзе области видимости браузер ориентируеться по родительскому элементу и масштабирует именно элемент .block меня же интересует как привязаться на дочерний элемент с position:absolute;

Answer 1

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

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  
  margin: 20px;
}

.absolute {
  position: absolute;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  z-index: -1;
  background-color: pink;
}

<div class="block">
  <img class="absolute" src="https://placehold.co/340x340?text=Hello+World" alt="image">
</div>

Answer 2

Я все еще не уверен, что правильно понял задачу. Ориентируюсь на картинку, добавленную автором. Мой способ предполагает, что мы знаем позицию блока на уровне CSS.

@property --block-left {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --block-top {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --toggler {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}

body {
  margin: 0;
  position: relative;
  --block-left: 0px;
  --block-top: 0px;
}

.block {
  position: relative;
  margin-left: var(--block-left);
  margin-top: var(--block-top);
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  box-sizing: border-box;
  animation: anim 3s ease-in-out alternate infinite;
}

.absolute {
  position: absolute;
/*
    left: max(-20px, calc(-1 * var(--block-left)));
    top: max(-20px, calc(-1 * var(--block-top)));

    left: min(calc((100vw - 340px) - var(--block-left)), -20px);
    top: min(calc((100dvh - 340px) - var(--block-top)), -20px);
*/
  left: calc( (1 - var(--toggler)) * max(-20px, calc(-1 * var(--block-left))) + var(--toggler) * min(calc((100vw - 140px) - var(--block-left)), -20px));
  top: calc( (1 - var(--toggler)) * max(-20px, calc(-1 * var(--block-top))) + var(--toggler) * min(calc((100dvh - 140px) - var(--block-top)), -20px));
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  z-index: -1;
}

@keyframes anim {
  from {
    --block-left: 0px;
    --block-top: 0px;
    --toggler: 0;
  }
  to {
    --block-left: calc(100vw - 100px);
    --block-top: calc(100dvh - 100px);
    --toggler: 1;
  }
}

<div class="block">
  <img class="absolute" src="https://placehold.co/140x140?text=Hello+World" alt="image">
</div>

БЛОГ НА HUSL

Отслеживание положения элемента со значением absolute

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