与隐藏在 CSS 中的可见性相反

在 Web 开发中，有时候需要隐藏一些内容，但又不想完全删除它们。有时可能还需要在某个时间点将其重新显示。这种情况下，我们可以使用 CSS 来实现隐藏和显示。

一般来说，我们通过设置元素的 visibility 或 display 属性来隐藏元素。但是，这些属性只能控制元素在页面中的是否可见，无法完全从页面中删除元素。因此，还有一种方法可以实现将元素完全从页面中删除，但又可以在需要时重新显示它们：使用 opacity 和 position 属性。

什么是 opacity 属性？

opacity 属性用于设置元素的透明度。其取值范围为 0 到 1，其中 0 表示完全透明，1 表示完全不透明。默认值为 1。

我们可以使用 opacity 属性来隐藏元素，设置其值为 0。如下所示：

.element {
  opacity: 0;
}

这样一来，该元素便被完全隐藏了。

什么是 position 属性？

position 属性用于设置元素的定位方式。其可取的值有 static、absolute、fixed、relative 和 sticky。默认值为 static。

我们可以通过设置元素的 position 属性为 absolute 或 fixed，来将其从文档流中移除，从而达到完全隐藏元素的目的。如下所示：

.element {
  position: absolute;
  left: -9999px;
}

这样一来，该元素就被移动到文档流的左侧，因此不会占据任何空间，完全被隐藏起来了。

如何重新显示这些被隐藏的元素？

要重新显示这些被隐藏的元素，我们只需要将它们的 opacity 和 position 属性设置回原来的值即可。

对于 opacity，我们只需要将它的值设置为 1 即可：

.element {
  opacity: 1;
}

对于 position，我们需要将其重新设置为原来的值。如果原来的值为 static，则不需要单独设置。否则，我们需要将其设置回原来的值，如下所示：

.element {
  /* 如果原来的 position 值为 absolute、fixed、relative 或 sticky，则需要将其设置回原来的值。 */
  position: static;
  left: auto;
}

总结

使用 opacity 和 position 属性，我们可以实现将元素完全从页面中删除，但又可以在需要时重新显示它们的目的。需要注意的是，这种方法仅适用于那些不需要在页面中占据空间的元素，例如图片、图标等。

以上就是与隐藏在 CSS 中的可见性相反的方法的介绍。希望对你有所帮助！