如何防止元素超出其容器边界

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

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 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 */
}

Answer 4

If you set the containing element to position: relative; and the inner element with position: absolute; the inner elements top left right and bottom properties will calculate from the borders of the containing element.

Here is a good source of css positioning .

In your case additional validation should be set to positionTop and positionLeft.

positionTop should be in the interval [( shapeHeight/2 ) - (100 - shapeHeight/2 ) ]

positionLeft should be in the interval [( shapeWidth/2 ) - (100 - shapeWeight/2 ) ]

Answer 5

You can get the parent element size, so that in your scirpt, use a condition to prevent the square to exceed.

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;

}

I'm not sure if .offsetWidth and .offsetHeight works well, but you got the idea :)

Answer 6

By tweaking just a little your positionTop and positionLeft variable, I managed to keep the square inside. You just need to change the maximum % that it needs to have to not exceed the container. I found that 75% for the top and 80% for the left seems to be the max!

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

Here's a fiddle