Как перевести любые координаты в относительную позицию div? - PullRequest
Новая
       3

Как перевести любые координаты в относительную позицию div?

0 голосов
/ 28 января 2020

Я пытаюсь использовать HTML, CSS и Javascript, чтобы решить следующую проблему, но все еще не могу найти решение:

Допустим, у меня есть внешний блок div, в который я хочу найти внутреннюю коробку div. У меня есть следующие данные:

x координата - от 0 до MAX_X_VALUE

y координата - от 0 до MAX_Y_VALUE

(x, y) обозначает левый верхний угол внутреннее поле.

Я хочу нормализовать координаты x, y к соответствующей позиции во внешнем поле. Таким образом (MAX_X_VALUE, MAX_Y_VALUE) будет переведен в правый нижний угол внешнего блока.

Я попытался использовать абсолютное позиционирование и использовать% единицы в «верхнем» и «левом». Таким образом, если я получу (MAX_X_VALUE, MAX_Y_VALUE), внутреннее поле будет размещено вне внешнего поля.

Как правильно решить эту проблему и как я могу ограничить, чтобы внутреннее поле оставалось в границы внешнего поля?

Вот фрагмент моего кода:

CSS

.outer-box {
  margin-left: 25%;
  height: 100%;
  position: relative;
}

.inner-box {
  width: 8vw;
  height: 6vw;
  border: 5px solid white;
  box-shadow: 0.3em 0.3em 5px gray;
  position: absolute;
}

Javascript

innerBoxElement.style.left = `${Math.floor(x / MAX_X_VALUE* 100)}%`;
innerBoxElement.style.top = `${Math.floor(y / MAX_Y_VALUE* 100)}%`;
outerBoxElement.insertAdjacentElement('afterbegin', innerBoxElement);

Заранее спасибо!

...