更改绝对元素的位置而不会发生容器溢出

Question

Maybe an obvious question but how do I make an element with a absolute position not overflow its container when moving it's position right? I know I could change it to relative position or move it 99% but for my project that won't due. I tried using margins, padding, object-fit, all with no success. Thanks for any help

 var green = document.getElementById('green'); function myFunct() { green.style.right = '100%'; } 

  h1 { position: relative; width: 80%; height: 100px; margin: auto; background-color: red; } #green { position: absolute; right: 0px; height: 100px; background-color: green; width: 20px; } 

 <h1> <div id = 'green'></div> </h1> <button onclick="myFunct()">FindHighScore</button> 

Answer 1

Use CSS calc()

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

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

Or, apply left: 0 and right: auto (reset)

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

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

A <div> should not be in a <h1> tag by the way.

Answer 2

You can set overflow to hidden at parent container.

<h1> permitted content is Phrasing content

 var green = document.getElementById('green'); function myFunct() { green.style.right = '100%'; } 

 div:not(#green) { position: relative; width: 80%; height: 100px; margin: auto; background-color: red; overflow: hidden; } #green { position: absolute; right: 0px; height: 100px; background-color: green; width: 20px; } 

 <div> <div id='green'></div> </div> <button onclick="myFunct()">FindHighScore</button>