更改絕對元素的位置而不會發生容器溢出

Question

也許是一個明顯的問題，但是當正確移動位置時，如何使絕對位置的元素不會溢出其容器？ 我知道我可以將其更改為相對位置或將其移動99％，但是對於我的項目而言，這是不可行的。 我嘗試使用邊距，填充，對象適合，但都沒有成功。 謝謝你的幫助

 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

使用CSS calc()

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

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

或者， left: 0應用left: 0 ， right: auto （重置）

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

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

順便說一下， <div>不應位於<h1>標記中。

Answer 2

您可以將overflow設置為hidden在父容器中。

<h1>允許的內容是短語內容

 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>