How to prevent element from exceeding his container borders

Question

I have a square, when clicked it appears in a random location and it also change size (so for example if I have a 30px box but it is 10px from the left border I still get 10px outside the gamespace).

sometimes the square exceed his container border

How can I make sure that the square will never exceed his container?

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>

Answer 1

You need to set position: relative; to the parent element and position: absolute; to the shape element. Then use max min value for random where max is the parent width/height and subtract the shape width/height ...

This is snippet before update

function position() {
  var playSpace = document.querySelector('#playSpace');
  var shape = document.getElementById("shape");
  var maxHeight = playSpace.offsetHeight - shape.offsetHeight;
  var maxWidth = playSpace.offsetWidth - shape.offsetWidth;

  var positionTop = Math.random() * (maxHeight - 0) + 0;
  var positionLeft = Math.random() * (maxWidth - 0) + 0;

  // think of this like so:
  // var positionTop = Math.random() * (max - min) + min;
  // more information about it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

  var position = "position:absolute;top:" + positionTop + "px;left:" + positionLeft + "px;"
  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 {
  position: relative; /* add this line */
  width: 90%;
  height: 90%;
  margin: 0 auto;
  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>

Updated after comment Not sure how you added the size() function but probably the problem was with using ...cssText that you overwrote the changes. So now I changed the code with passing the element to the functions and then only change the single CSS statements which need to be changed.

function position(element) {
  var playSpace = document.querySelector('#playSpace');
  var shape = document.getElementById("shape");
  var maxHeight = playSpace.offsetHeight - shape.offsetHeight;
  var maxWidth = playSpace.offsetWidth - shape.offsetWidth;

  var positionTop = Math.random() * (maxHeight - 0) + 0;
  var positionLeft = Math.random() * (maxWidth - 0) + 0;

  // think of this like so:
  // var positionTop = Math.random() * (max - min) + min;
  // more information about it https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

  element.style.position = 'absolute';
  element.style.top = positionTop + "px";
  element.style.left = positionLeft + "px";
}

function size(element) {
  var sizeMath = (Math.random() * 200) + 50;
  element.style.width = sizeMath + "px";
  element.style.height = sizeMath + "px";
}

document.getElementById("shape").onclick = function() {
    size(document.getElementById("shape"));
    position(document.getElementById("shape"));
}

#gameSpace {
width: 100%;
height: 470px;
background: blue;
margin:0;
padding-top: 30px;
}


#playSpace {
position: relative; /* add this line */
width: 90%;
height: 90%;
margin: 0 auto;
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>

Answer 2

You can use a specify the range (min/max) in Math.random function and then use this function Math.floor(Math.random() * (max - min + 1)) + min; to limit the returned value of the random function between min and max.

• maxTop : height of the container - height of shape
• maxLeft : width of the container - width of shape
• minTop : 0
• minLeft : 0

You need to use position:absolute and px value on shape for this to work

See code snippet:

function position() {

  var minTop = 0;
  var maxTop = document.getElementById("playSpace").clientHeight - document.getElementById("shape").clientHeight;
  var minLeft = 0;
  var maxLeft = document.getElementById("playSpace").clientWidth - document.getElementById("shape").clientWidth ;
  
 

  var positionTop = Math.floor(Math.random() * (maxTop - minTop + 1) + minTop);
  var positionLeft = Math.floor(Math.random() * (maxLeft - minLeft + 1) + minLeft);

  
  var position = "position:absolute;top:" + positionTop + "px;left:" + positionLeft + "px;"
  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;
  text-align:center;
}

#playSpace {
  width: 90%;
  height: 90%;
  border: 1px black solid;
  position:relative;
  display:inline-block;
}

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

Answer 3

With CSS calc, limit the position inside playSpace area (you can use different units, here % and px).

Then with offsetTop/offsetLeft, get the real position of the square and avoid negative positions (when positionTop < 100px or positionLeft < 100px).

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

document.getElementById("shape").onclick = function() {
    var shapeDiv = document.getElementById("shape");
    shapeDiv.style.cssText = position();
    var top = shapeDiv.offsetTop;// Result of calc(" + positionTop + "% - 100px) in px
    if(top < 0) {
        shapeDiv.style.top = '0px';
    }
    var left = shapeDiv.offsetLeft;// Result of calc(" + positionLeft + "% - 100px) in px
    if(left < 0) {
        shapeDiv.style.left = '0px';
    }
}

Don't forget to add position: relative to #playSpace, to get offsetTop/left correct

#playSpace {
    position:relative;/* mandatory */
}