如何阻止 div 占用空间？答案

【问题标题】：How do I stop a div taking up space?如何阻止 div 占用空间？
【发布时间】：2020-06-17 18:45:08
【问题描述】：

我正在使用 ajax 进度条之类的东西......

基本上我有一个隐藏的 div，上面写着“正在加载”，在它下面我有一个可见的 div，里面有我的内容。

加载时，它会淡出内容 div，使隐藏的 div 可见，并通过 javascript/相对定位将其移动到内容的中间。

它看起来很糟糕，但不幸的是，当 div 可见时，即使它相对定位，它也会占用一条线，因此我的内容会向下移动。

你知道我如何阻止它在可见时占用空间吗？

编辑：似乎有人删除了标签

加载的 div 一开始不显示，所以它不占用空间，然后当它变得可见时，它开始占用空间，即使它是相对定位的。

我可以使用可见和不可见，但它会强制我的内容窗口一直关闭。

看起来绝对定位是要走的路。

我想做的是结合绝对定位和相对定位。我正在尝试获取内容 div 的绝对坐标并以这种方式设置其位置，但尚未成功。

编辑：我刚刚重新阅读了您的答案，而您确实做到了。谢谢！

【问题讨论】：

它与'asp.net'无关：你能删除标签吗？

标签： html css

【解决方案1】：

“你知道我如何阻止它在可见时占用空间吗？”

绝对定位。

div#theParent {
  position:relative;
  height:200px;
  width:640px;
  top:50px;
  left:50px;
}
div#theChild {
  position:absolute;
  height:100px;
  width:400px; 
  top:50px;
  left:120px;
}

<div id="theParent">
  <div id="theChild">
    <p>This div is absolutely positioned to a relatively-positioned parent.</p>
  </div>
</div>

【讨论】：

为什么投反对票。他询问如何防止相对位置的项目在可见时移动兄弟姐妹。
+1 来自我 - 除非我误读了这个问题，否则你的答案是回答他问题的唯一答案（这是关于如何在可见时阻止它移动东西，而不是如何阻止它采取不可见时增加空间）。
如果你玩绝对位置，当然 div 不会移动...但是即使这样问问题，好的做法是使用 'display:none' 而不是'可见：隐藏'......这就是我投反对票的原因。
让他尝试两种解决方案，他会选择正确的“如他所愿”的答案。
SLC，必须将parent设置为position:relative，这样绝对坐标以parent在文档中的位置为准。再看看我的例子。

【解决方案2】：

如果您想使其不可见，请使用style="display:none" 使其真正不可见。有很多方法可以做到这一点......不确定你是如何设置的或者你是如何改变你的 dom 元素的。提供更多上下文（使用 Ajax 控件、自定义 JavaScript、jQuery 等库等），我们可以为您提供更具体的解决方案。

【讨论】：

【解决方案3】：

您必须使用 display 选项，而不是 visible 选项：

提示：即使是不可见的元素也会占用页面空间。使用“display”属性创建不占用空间的不可见元素！

见w3schools

[编辑]

阅读w3fools后，即使他们没有收集到关于pr_class_visibility的任何错误，他们也会收集关于pr_class_display的错误：所以 never see w3schools

但是你可以看到reference.sitepoint.com：

如果隐藏框的可见性设置为可见，则隐藏框的后代框将可见，而显示设置为无的元素的后代永远不能生成自己的框。

【讨论】：

【解决方案4】：

你可以尝试各种各样的事情，比如。取决于你的代码是如何构造的。由于您没有提供示例:)

display: none;
height:0px 
line-height: 0px;
font-size: 0px;

【讨论】：

【解决方案5】：

我知道这是一个旧线程，但现在我们有 position:sticky; 并且想要很好地使用它，一种方法是设置 height:0; overflow:visible;

【讨论】：

【解决方案6】：

我知道这已经得到解答，但如果您使用引导程序，请尝试：

class='hide'

而不是

class='hidden'

【讨论】：