Javascript 更改绝对元素的位置而不导致容器溢出

也许这是一个显而易见的问题，但我如何使一个绝对位置的元素在向右移动时不会溢出其容器？我知道我可以改变它的相对位置或移动它99%，但我的项目，将不会到期。我尝试使用边距、填充、对象匹配，但都没有成功。谢谢你的帮助

var green=document.getElementById（'green'）；
函数myFunct（）{
green.style.right='100%'；
}

h1{
位置：相对位置；
宽度：80%；
高度：100px；
保证金：自动；
背景色：红色；
}
#绿色的{
位置：绝对位置；
右：0px；
高度：100px；
背景颜色：绿色；
宽度：20px；
}

FindHighScore

使用CSS

calc（）

或者，应用左：0和右：自动（重置）

---

顺便说一下，

不应该在

标记中。

您可以在父容器中将

溢出设置为
隐藏

允许的内容是


var green=document.getElementById（'green'）；
函数myFunct（）{
green.style.right='100%'；
}
div:not（#绿色）{
位置：相对位置；
宽度：80%；
高度：100px；
保证金：自动；
背景色：红色；
溢出：隐藏；
}
#绿色的{
位置：绝对位置；
右：0px；
高度：100px；
背景颜色：绿色；
宽度：20px；
}

FindHighScore
标记无法放入标记
var green = document.getElementById("green");

function myFunct() {
  green.style.right = "calc(100% - 20px)";
}

var green = document.getElementById("green");

function myFunct() {
  green.style.left = "0";
  green.style.right = "auto";
}