CSS如何将元素完全移出可见屏幕？

3 min read

有以下几种方法可以将元素完全移出可见屏幕：

  1. display:none;：将元素完全隐藏，此时不会占据屏幕空间，需使用 JavaScript 等动态语言控制显示;

  2. visibility:hidden;：元素隐藏，但不会影响页面布局，仍然占据屏幕空间;

  3. position:absolute; left:-9999px;：将元素的左边界设置为屏幕左外，因此在可见屏幕以外;

  4. position:absolute; right:-9999px;：将元素的右边界设置为屏幕右外，因此在可见屏幕以外;

  5. opacity:0;：元素的透明度设置为0，即完全透明，元素仍然占据屏幕空间;

这些方法中，display:none; 和 visibility:hidden; 主要用于控制元素的隐藏和显示，而后三种方法则主要是将元素移出屏幕。