一：定义

隐藏元素，就是在可视窗口内看不见元素

二：分类

1：完全隐藏：元素从渲染树中消失，不占据空间。

2：视觉上的隐藏：屏幕中不可见，占据空间。

3：语义上的隐藏：读屏软件不可读，但正常占据空

三：方案

1：display

.hidden-element {
  display: none;
}

2： hidden    HTML5 新增属性，相当于 display: none

<div hidden></div>

3：设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域

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

4：设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域

position: relative;
left: -99999px;
height: 0

5：设置 margin 值，将其移出可视区域范围（可视区域占位）。

margin-left: -99999px;
height: 0;

6：aria-hidden 属性

<div aria-hidden="true"></div>

7：visibility: hidden;

.hidden-element {
  visibility: hidden;
}

8：opacity: 0;

.hidden-element {
  opacity: 0;
}

9：z-index=-1

.hidden-element {
  z-index: -1;
}