我正在使用visibility:hidden 隐藏某些元素，但它们在隐藏时仍会占用页面空间。
我怎样才能让它们在视觉上完全消失，就好像它们根本不在 DOM 中（但实际上没有从 DOM 中删除它们）？
【问题讨论】：
offsetTop，而display:none 会将offsetTop 设置为0。我的解决方案是使用visibility: hidden 然后设置宽度和高度到 0。一旦我需要使元素再次可见，我使用 Javascript 删除了这三个属性。有点老套的解决方案，但它适用于几乎所有用例。
尝试设置display:none隐藏并设置display:block显示。
【讨论】：
display: block，有些必须设置为display: inline（例如<span> 或<a> 或<img> DOM 元素）。
display: none 创建一个名为hidden 的CSS 类。将类添加到元素以隐藏它，删除它显示。删除时，display 属性恢复为元素默认值。
使用样式而不是喜欢
<div style="display:none;"></div>
【讨论】：
使用display:none 是一个很好的选择，只是删除一个元素，但是也会为屏幕阅读器删除。如果它影响搜索引擎优化，也有讨论。关于该主题有一篇很好的简短文章on A List Apart
如果你真的只想隐藏而不是移除一个元素，最好使用：
div {
position: absolute;
left: -999em;
}
这样它也可以被屏幕阅读器阅读。
这种方法的唯一缺点是，这个 DIV 是实际渲染的，它可能会影响 性能，尤其是在手机上。
【讨论】：
visibility: hidden; 运行，假设您有其他绝对元素，它们不会与空间冲突，只是z-index 的冲突。只是为了隐藏一个元素，我会选择visibility
看，不要使用visibility: hidden;，而是使用display: none;。第一个选项将隐藏但仍然占用空间，第二个选项将隐藏且不占用任何空间。
【讨论】：
切换 display 不允许平滑的 CSS 过渡。而是切换visibility 和max-height。
visibility: hidden;
max-height: 0;
【讨论】：
transform: translateX(-100%) 之类的东西将元素隐藏在可见区域之外。我们不想要display: none
display: none 是解决方案，即用空间完全隐藏元素。
display:none和visibility: hidden的故事
visibility:hidden 表示标签不可见，但在页面上为其分配了空间。
display:none 表示用空间完全隐藏元素。 （虽然你仍然可以通过 DOM 与之交互）
【讨论】：
这个问题的答案是使用 display:none 和 display:block，但这对于尝试使用 css 过渡来使用可见性属性显示和隐藏内容的人没有帮助。
这也让我发疯了，因为使用显示会杀死任何 css 过渡。
一种解决方案是将其添加到使用可见性的类中：
overflow:hidden
这个工作确实取决于布局，但它应该将空内容保留在它所在的 div 中。
【讨论】：
display:none 隐藏并设置display:block 显示。
【讨论】：
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hidden 仅停止显示内容但仍使用垂直/水平空间，display:none 删除元素的垂直/水平空间。
在 display:none 之后将它们放回这里有不同的看法。不要使用 display:block/inline 等。而是（如果使用 javascript）将 css 属性显示设置为 ''（即空白）
【讨论】：
$('#abc').css({"display":"none"});
这隐藏了内容，也不会留下空白。
【讨论】：
据我所知，有四种可能
<button style="display:none;"></button>
#buttonId{ display:none; }
$('#buttonId').prop('display':'none'); & $("#buttonId").css('opacity', 0);
【讨论】：
display:none 是避免占用页面空白的最佳方法
【讨论】：
感谢这个问题。我想要完全相反，即隐藏的 div 仍应占据浏览器上的空间。所以，我使用了visibility: hidden 而不是display: none。
【讨论】：
如果隐藏元素的所有其他选项都不适合您，那么还有一个我没有提到的选项。 假设元素没有子元素，它就可以工作。
它会隐藏一个元素而不占用空间：
display: contents;
检查浏览器支持，因为它是一个新的 CSS 功能。
【讨论】：
将可见性设置为隐藏我所知道的使其不占用空间的唯一方法是使用position:absolute，然后设置顶部、左侧等参数。这并不理想，但它确实有效。
【讨论】：
如果显示：无；不起作用，您必须添加 clear: none;
【讨论】：