css隐藏元素的方式

目录

1.overflow:hidden

2.opacity:0；

3.visibility:hidden

4.display:none

5.position:absolute

6.z-index:-1000

7.transform:scale(0)

---

1.overflow:hidden

        隐藏元素溢出部分，占据空间，无法响应点击事件 

.hide{
     overflow:hidden;  // 占据空间
}

2.opacity:0；

        opacity是用来设置元素透明度的，但当设置成0的时候相当于隐藏元素。

        因此，元素依然存在原来的位置，占据空间也可响应事件。

        会触发页面的重绘，不会触发重排。

        在读屏软件中使用opacity隐藏元素，元素和它所有的内容会被读屏软件阅读

.hide{
    opacity:0;  // 占据空间
}

3.visibility:hidden

       会占据空间， 但不会响应任何用户交互。

        会触发页面的重绘，不会触发重排。

       元素在读屏软件中也会被隐藏。

.hide{
    visibility:hidden; // 占据空间
}

4.display:none

        彻底的隐藏元素，不占据空间，不影响布局，无法响应事件。

        在dom结构上还是可以看到它，只是不在页面上显示。

        会触发页面的重排和重绘。

.hide{
    display:none;  // 不占据空间
}

5.position:absolute

.hide{
    position：absolute;
    left:-99999px;
    top:-90999px; //  不占据空间
}
.hide-2{
    position：relative;
    left:-99999px;
    top:-90999px;  //  占据空间
}

6.z-index:-1000

        通过设置z-index值使其它元素遮盖该元素

.hide{
    position:absolute;
    z-index:-1000;   // 不占据空间
}

7.transform:scale(0)

        transfrom是css3新增的元素转换，scale代表缩放，1为不缩放，0为缩放最小。

        会占据空间，但是不会响应事件。       

        会触发页面的重绘，不会触发重排。

.hide{
    transform: scale(0,0)  // 占据空间
}