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">

当其他元素的大小发生变化时，绝对定位元素会移动

1 个答案: