1. **利用 display 属性**
CSS 的 `display` 属性用于定义一个元素应该生成什么样的框，并且控制这个元素如何影响正常的流动布局。若要使元素既被隐藏又不占位，可以将此属性设置为 "none"：
css
.hidden-element {
display: none;
}
当你把一个元素的 `display` 设置成 “none”，浏览器会从渲染树移除这个元素及其内容，因此它不再占有原来的布局空间和计算DOM相关样式了。
2. **运用 visibility 属性**
另一种方法是通过修改 `visibility` 属性达到类似的效果。但是与 `display:none;` 不同的是，设定了 `visibility:hidden;` 的元素仍然存在于网页布局当中但不可见:
css
.invisible-element {
visibility: hidden;
}
尽管对用户来说这些元素看上去像是消失了，但实际上它们仍保留原有大小及所在的空间，在视觉层面上看不到而已，这可能会影响周围其他元素的位置排列。
3. 使用 opacity 属性
虽然严格意义上说改变透明度并不算真正意义上的“隐藏”，但如果我们将元素完全变为透明，则能达到近似于隐藏而又不影响布局的目的：
css
.transparent-element {
opacity: 0;
}
注意，仅更改 Opacity 并不能阻止鼠标事件发生在已变得完全透明的元素之上；而前两种方式则同时也会使得相关的交互行为失效。
总结一下：如果你的目标是在不让元素占据任何屏幕或布局空间的情况下进行隐藏，那么应当优先考虑采用 `display: none;` 。如果只是想让元素看不见却依然维持原地并且不妨碍点击等互动操作的话，则可以选择设定 `opacity: 0;` 或者更特殊场景下的 `visibility: hidden;`。每种选择都应依据实际应用场景灵活选取以达成最优效果。