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和right: auto（重置）

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

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

<div>不应放在<h1>标记中。

Answer 2

您可以在父容器上将overflow设置为hidden。

<h1>允许的内容是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>

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

2 个答案: