当其他元素的大小发生变化时，绝对定位的元素会移动
当其他元素的大小发生变化时，绝对定位的元素会移动
提问于 2018-02-25 09:33:10
我创建了这个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容器，顶部有一个按钮，下面有一些文本，底部有一个按钮。我需要底部的按钮无论如何都要留在那里，所以我试着使用绝对定位。但是，当按下第一个按钮时，中间的文本将被删除，这会使底部按钮向上移动。
我怎么才能让它工作呢？谢谢。
Stack Overflow用户
回答已采纳
发布于 2018-02-25 09:49:48
有几种方法可以做到这一点。您可以将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">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48969388
复制相关文章
相似问题
腾讯云开发者
