html - 当其他元素的大小改变时，绝对定位元素移动

Question

我创建了这个 jsfiddle 来演示我的问题:https://jsfiddle.net/k5mzg46k/17/

HTML:

<div class="container">
    <input type="button" id="btn1">
    <p id="text">
        LOL LOL
    </p>
    <input type="button" class="btn2">
</div>

JS:

document.getElementById("btn1").onclick =

function run() {
    var element = document.getElementById("text");
  element.innerHTML = "";
}

CSS:

#text {
        margin: 0 auto;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    font-size: 14px;
}

#btn1{
  height: 47px;
  width: 47px;
}

.btn2 {
    margin-top: 5px;
    height: 30px;
    position: absolute;
    left: 0;
    right: 0;
}

.container {
    display: inline-block;
    position: relative;
    border: 1px solid black;
}

所以我有一个 div 容器，顶部有一个按钮，下面有一些文本，底部有一个按钮。无论如何我都需要底部的按钮留在那儿，所以我尝试使用绝对定位。然而，当第一个按钮被按下时，中间的文本被删除，这使得底部按钮向上移动。

我怎样才能使这项工作？谢谢。

Answer 1

有几种方法可以做到这一点。您可以更改您的 JavaScript 以仅隐藏您的元素:

document.getElementById("btn1").onclick =

function run() {
  var element = document.getElementById("text");
  element.style.visibility = 'hidden';
}

或者如果您必须删除该元素，您可以将按钮从 div 中移出，这样 display: absolute 就可以了(也可以更改按钮的左右):

<div class="container">
<input type="button" id="btn1">
<p id="text">
LOL LOL
</p>
</div>
<input type="button" class="btn2">