隐藏元素

隐藏类型

• 完全隐藏：元素从渲染树中消失,不占据空间

• 视觉上的隐藏：屏幕中不可见,占据空间

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

完全隐藏

• display: none;

• <div hidden>xxxx</div>

视觉上的隐藏

利用position和盒模型 将元素移出可视区范围

1. 设置position为absolute或fixed,通过设置top、left 等值,将其移出可视区域

position:absolute;
left: -99999px;

1. 设置position为relative,通过设置top、left等值,将其移出可视区域

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

1. 设置margin值,将其移出可视区域范围(可视区域占位)

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

利用transform

1. 缩放

transform: scale(0);
height: 0;

1. 移动translateX, translateY

transform: translateX(-99999px);
height: 0

1. 旋转rotate

transform: rotateY(90deg);

设置其大小为0

1. 宽高为0,字体大小为0

height: 0;
width: 0;
font-size: 0;

1. 宽高为0,超出隐藏

height: 0;
width: 0;
overflow: hidden;

设置透明度为0

• opacity: 0;

visibility

• visibility: hidden;

层级覆盖,z-index属性

position: relative;
z-index: -999;
 /* 再设置一个层级较高的元素覆盖在此元素上 */

clip-path裁剪

• clip-path: polygon(0 0, 0 0, 0 0, 0 0);

语义上的隐藏

aria-hidden属性(读屏软件不可读,占据空间,可见)

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