Как не допустить превышения элементом границ контейнера

У меня есть квадрат, при щелчке он появляется в случайном месте и также меняет размер (например, если у меня есть поле размером 30 пикселей, но это 10 пикселей от левой границы, я все равно получаю 10 пикселей вне игрового пространства). р>

иногда квадрат превышает границу его контейнера

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

 function position() {
  var positionTop = Math.random() * 100;
  var positionLeft = Math.random() * 100;
  var position = "position:relative;top:" + positionTop + "%;left:" + positionLeft + "%;"
  return position;
}

document.getElementById("shape").onclick = function() {
  document.getElementById("shape").style.cssText = position();
}
 #gameSpace {
  width: 100%;
  height: 470px;
  background: blue;
  margin: 0;
  padding-top: 30px;
}

#playSpace {
  width: 90%;
  height: 90%;
  margin: 0 auto;
  margin-top: 10px;
  border: 1px black solid;
}

#shape {
  width: 100px;
  height: 100px;
  background-color: red;
}
 <div id="gameSpace">
  <div id="playSpace">
    <!-- here we put the shape -->
    <div id="shape"></div>
  </div>
</div>
7 голосов | спросил Itairozen 6 J0000006Europe/Moscow 2017, 10:51:11

3 ответа


0

Вы можете получить размер родительского элемента, чтобы в вашем scirpt использовалось условие, чтобы квадрат не превышал.

function position() {

var maxWidth = document.getElementById("playSpace").offsetWidth;
var maxTop = document.getElementById("playSpace").offsetHeight;

var positionTop = Math.random() * 100;
var positionLeft = Math.random() * 100;

if (positionTop > maxTop) { positionTop = maxTop;)
if (positionLeft > maxWidth) { positionLeft = maxWidth;)
var position = "position:relative;top:" + positionTop + "%;left:" + positionLeft + "%;"
return position;

}

Я не уверен, что .offsetWidth и .offsetHeight работают хорошо, но вы поняли:)

ответил Poch 6 J0000006Europe/Moscow 2017, 10:58:26
0

Путем небольшого изменения переменных positionTop и positionLeft мне удалось сохранить квадрат внутри. Вам просто нужно изменить максимальный%, который должен иметь, чтобы он не превышал контейнер. Я обнаружил, что 75% для верха и 80% для левого, кажется, максимум!

var positionTop = Math.floor(Math.random() * 75)   ;
var positionLeft = Math.random() * 80;


Вот скрипка

ответил Marine Le Borgne 6 J0000006Europe/Moscow 2017, 11:06:04
0

Если вы установите для содержащего элемента значение position: relative;, а для внутреннего элемента - position: absolute; внутренние элементы верхнего левого, правого и нижнего свойств будут рассчитываться по границам содержащего элемента.

Вот хороший источник позиционирования CSS .

В вашем случае дополнительная проверка должна быть установлена ​​в positionTop и positionLeft.

positionTop должен находиться в интервале [(shapeHeight /2) - (100 - shapeHeight /2)]

positionLeft должен находиться в интервале [(shapeWidth /2) - (100 - shapeWeight /2)]

ответил Necvetanov 6 J0000006Europe/Moscow 2017, 10:57:21

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132