如何隐藏页面中的某个元素？(越多方式越好) about step-by-step

[KRISACHAN]

隐藏类型

可见性	屏幕可见	可访问树
完全隐藏	隐藏	隐藏
语义上隐藏	可见	隐藏
视觉上隐藏	隐藏	可见

完全隐藏

此方法会让元素从渲染树中消失，渲染的时候不占据任何空间，且不可进行DOM操作。

hide {
    display: none;
}

此方法相当于 display: none;

<div hidden></div>

语义上的隐藏

此方法使读屏软件不可读，但正常占据空间，且可进行DOM操作。

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

视觉上的隐藏

此方法使肉眼不可见，但占据正常空间，且不可进行DOM操作。

hide {
    visibility: hidden;
}

此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。

hide {
    opacity: 0;
}

此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。

hide {
    transform: scale(0, 0);
}

此方法把要隐藏的DOM移出到可视位置，不占据正常流，且可进行DOM操作。

:root {
    --biu: -999999px;
}
hide {
    position: absolute;
    left: var(--biu);
    top: var(--biu);
}

此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。

hide {
    clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

此方法使肉眼不可见，但占据正常空间，且可进行DOM操作。

:root {
    --biu: rgba(0, 0, 0, 0);
}
hide {
    border: 1px solid currentcolor;
    color: var(--biu);
    background: currentcolor;
    ...and so on;
}

[woyiweita]

元素隐藏

• 常用两种方法

1. display:none; (不占位隐藏)
2. visibility:hidden; (占位隐藏)

---

• 将透明度设置为0

3. opacity:0; (需要考虑兼容性,filter:Alpha(opacity=0))(占位)

---

• 定位

    <!--HTML结构-->
    <div class="box">
        <div class="self">qwwww</div>
    </div>

4. position:absolute;left:-999%;(移出可视区域，为何不使用正值自行尝试，不占位)
5. position:fixed;left:-999%;(移出可视区域，为何不使用正值自行尝试，不占位)
6. position:relative;left:-999%;(移出可视区域，为何不使用正值自行尝试，占位)
7. .box{background-color:#fff;}.self{position:absolute;z-index:-9;}(移至底层，使用背景遮罩，不占位)
8. .box{background-color:#fff;}.self{position:fixed;z-index:-9;}(移至底层，使用背景遮罩，不占位)
9. .box{background-color:#fff;}.self{position:relative;z-index:-9;}(移至底层，使用背景遮罩，占位)

---

• Transform

10. transform: translate(-999%, -999%);(移出可视区域，为何不使用正值自行尝试，占位)
11. transform: scale(0);(缩放，占位)

---

• 盒模型

12. margin-left:-999%;(移出可视区域，为何不使用正值自行尝试，占位，慎用)
13. width:0;height:0;overflow:hidden;(盒子大小为0，超出隐藏，不占位)

---

• 常用文本隐藏

14. text-indent:-9999px;(移出可视区域，为何不使用正值自行尝试)

[DazhiFe]

1. opacity

.hide-opacity {
  opacity: 0;
}

通过下面的gif图，我们可以总结opacity隐藏元素有几个特点：

• 只是视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局
• 依然能够响应用户的交互
• 通过DOM依然可以获取该元素，可以响应DOM事件
• 其子孙元素即使重新设置了opacity: 1也无法显示
• 元素和它所有的内容会被读屏软件阅读（没有测试过）

2. visibility

.hide-visibility {
  visibility: hidden;
}

通过下面的gif动图，同样我们可以总结出visibility隐藏元素的特点：

• 隐藏元素的依然占据着空间，影响其他元素的布局
• 不会响应任何用户交互
• 通过DOM依然可以获取该元素，无法响应DOM事件
• 其子孙元素可以通过重新设置visibility: visible来显示
• 元素在读屏软件中也会被隐藏（没有测试过）

3. display

是真正意义上的隐藏元素。

.hide-display {
  display: none;
}

通过下面的gif动图，我们可以总结出display: none隐藏元素的特点：

• 真正意义上的隐藏，元素不会占据任何空间
• 用户无法与其进行直接的交互
• 通过DOM依然可以获取到该元素
• 其子孙元素即使重新设置display: block也无法显示
• 读屏软件无法读到该元素的内容（没有测试过）
• transition动画会失效

4. hidden

HTML5新增的hidden属性，可以直接隐藏元素。

<div hidden>
  我是被隐藏的元素
</div>

特点：

跟display表现一致。

5. position

.hide-position {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

特点：

• 视觉上的隐藏，实际显示在屏幕的可视区之外，不会占据空间，不影响其他元素的布局
• 用户无法与其进行直接的交互
• 元素的内容可以被读屏软件读取（没有测试过）
• 通过DOM依然可以获取到该元素
• 其子孙元素无法通过重新设置对应的属性来显示

6. clip-path

通过裁剪元素来实现隐藏。

.hide-clip {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

特点：

• 视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局
• 用户无法与其进行直接的交互
• 元素的内容可以被读屏软件读取（没有测试过）
• 通过DOM依然可以获取到该元素
• 其子孙元素无法通过重新设置对应的属性来显示

7. overflow

通过设置元素的宽高为0来隐藏元素。

.hide-overflow {
  width: 0;
  height: 0;
  overflow: hidden;
}

必须加上overflow: hidden，否则其子孙元素依然可以显示，下面的动图可以说明：

特点：

• 视觉上的隐藏，隐藏元素的不会占据任何空间，不会影响其他元素的布局
• 用户无法与其进行直接的交互
• 元素的内容可以被读屏软件读取（没有测试过）
• 通过DOM依然可以获取到该元素
• 其子孙元素无法通过重新设置对应的属性来显示

8. transform

.hide-transform {
  transform: translate(-9999px, -9999px);
}

或者

.hide-transform {
  transform: scale(0);
}

特点：

• 视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局
• 用户无法与其进行直接的交互
• 元素的内容可以被读屏软件读取（没有测试过）
• 通过DOM依然可以获取到该元素
• 其子孙元素无法通过重新设置对应的属性来显示

其他

如果是纯文本的隐藏，可以设置

.hide-text {
  text-indent: -9999px;
}

或者

.hide-text {
  font-size: 0;
}

还有一个是无障碍设计规范里面的：

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

差异性

上面简单的罗列了8中隐藏元素的方式，其实给我们视觉上的效果，这些方法都可以让元素不可见（也就是我们所说的隐藏）。然而，屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被读屏软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，我们将其归为三大类：

• 完全隐藏
• 视觉上的隐藏
• 语义上的隐藏

三种类型的隐藏总结下来如下表所示：

可见性状态	屏幕上	可访问性树（读屏软件等）
完全隐藏	隐藏	隐藏
视觉上的隐藏	隐藏	可见
语义上的隐藏	可见	隐藏

完全隐藏

针对上面所列的8种方法，能够实现完全隐藏的只有下面这3种：

• display: none
• visibility: none
• HTML5新增的hidden属性

视觉上的隐藏

• opacity
• position
• transform
• clip-path
• overflow

语义上的隐藏

• aria-hidden="true"

其他区别

隐藏方式	占据原来的空间	直接跟用户交互	直接响应DOM事件
opacity	是	是	是
visibility	是	否	否
display	否	否	否
hidden	否	否	否
position	否	否	否
clip-path	是	否	否
overflow	否	否	否
transform	是	否	否

参考：

【译】用 CSS 隐藏页面元素的 5 种方法

[YvetteLau]

1.将元素移出可视区范围

1. 设置 posoition 为 absolute 或 fixed，�通过设置 top、left 等值，将其移出可视区域。(可视区域不占位)

position:absolute;
left: -99999px;

2. 设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。（可视区域占位）

position: relative;
left: -99999px;

如希望其在可视区域不占位置，需同时设置 height: 0;

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

margin-left: -99999px;

如果希望其在可视区域不占位，需同时设置 height: 0;

2.利用 transfrom

1. 缩放(占据空间)

transform: scale(0);

如果希望不占据空间，需同时设置 height: 0

2. 移动 translateX, translateY(占据空间)

transform: translateX(-99999px);

如果希望不占据空间，需同时设置 height: 0

3. 倾斜90度，并设置height为0(不占据空间)

transform: skew(90deg);
height: 0;

1. 旋转 rotate (不占据空间)

transform: rotateY(90deg);

3.display 属性(不占据空间)

display: none;

4.设置其大小为0 (不占据空间)

宽高为0，字体大小为0：

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

宽高为0，超出隐藏:

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

5.设置透明度为0 (占据空间)

opacity: 0;

6.visibility属性 (占据空间)

visibility: hidden

7.层级覆盖，z-index 属性 (占据空间)

position: relative;
z-index: -999;

再设置一个层级较高的元素覆盖在此元素上。

8.clip-path 裁剪 (占据空间)

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

9.使用JS从DOM中移除元素

[evliskin]

1.display:none
2.visibility:hidden
3.父级宽高为0
4.position:absolute top left属性设置很大脱离页面
5.元素z-index设负值 其他元素给个正值
暂时想到这么多 不知道对不对

[yangjianwei1223]

将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域。

[darlingyz]

1、display:none;
2、 visibily:hidden;
3、overflow:hidden;
4、 z-index:-1//别的层级关系
5、 positin:absolute;//定位相关的
left：-999999999;
6、 opacity:0;
7、各种框架的条件渲染也可以实现元素的隐藏等
------想到了这么多，期待大佬们的方法

[shenanheng]

1:display:none;
2: visibily:hidden;
3:利用定位,移动到很远很远的距离
4:利用定位,z-index
5:opacity:0;
6:将这个元素的所有都变成透明色
7:利用js来进行隐藏、删除
8:设置一个元素的宽高都为0;
9:利用absoulute让元素缩成一团

[daibin0809]

1. display: none;
2. visibility: hidden;
3. opacity: 0;
4. z-index;
5. position: absolute;
6. height: 0;overflow: hidden;
7. transform: scale(0);
   ...不知道了=

[kaiking01]

1. display:none;
2. position:absolute; top:-100000px; left:-100000px
3. position:fixed; top:-100000px;left:-100000px;
4. position:relative; z-index:2; (前提是，设置一个兄弟级元素，除了z-index大于它之前，其他css都一样的)
5. width:0;height:0; overflow: hidden;
6. opacity:0;
7. margin-left:-100000px; (父容器设置overflow:hidden;)
8. padding-left:-100000px; (父容器设置overflow:hidden;)
9. transform:translateY(-10000px); （或者translateX(-10000px);）
10. transform:scale(0);
11. transform: rotateX(90deg); （或者 rotateY(90deg);）
12. transform: skewX(90deg); （或者 skewY(90deg);）

[killbymywind]

1：opacity设置 0。
2：将 visibility 设置为 hidden。
3:position absolute 然后设置位置设到不可见区域
4:display： none 。
5：不设置高度。

[into-piece]

1. display: none;
2. visibility: hidden;
3. opacity: 0;
4. position: absolute; left/right/top/bottom: -max;/ z-index:-1;
5. height: 0;
6. 移动元素到页面看不见区域: margin/padding/translate:max;
7. transform: scale(0);
8. 一般react是控制一个状态变量isShow: {isShow&&element};

[xdandsl]

1,display为none
2,overflow为hidden
3,opacity为0(视觉上看不见元素，实际还存在)
4,将visibility设为hidden（占位隐藏）
5,transform: scale(0) （占位隐藏）
6,父元素height为0，再溢出隐藏overflow:hidden

[AILINGANGEL]

1. display: none
2. visibility:hidden
3. opacity: 0
4. color: transparent
5. 块元素： height: 0; width: 0; overflow: hidden
6. font-size: 0;

[Liruimin2]

display:none;
visibility:hidden;
z-index:-1000;
width:0;
height:0;
opacity:0;

[MissNanLan]

• display：none
• visibility： hidden( 占位隐藏)
• opacity: 0 (占位隐藏)
• color: transparent
• font-size: 0(可以消除display：inline-block的间距)
• z-index为负数，也要根据实际情况来定

[0uzu0]

1、display:none;
2、 visibily:hidden;
3、overflow:hidden;
4、 z-index:-1
5、 positin:absolute;
left：-999999999;
6、 opacity:0;

[yangyiqiqia]

1、dispaly:none
2、visibly:hidden
3、opacity:0
4、width:0;height:0;overflow:hidden
5、position:absolute,left:-9999px(将元素放在用户看不到地方)
6、transform:scale(0)

[zhujunwei]

1. display: none;
2. visibily: hidden;
3. opacity: 0;
4. position: absolute; 绝对定位超出屏幕;
5. 由文本撑起来的块， font-size: 0
6. css3 transform: scale(0);

[chenjiake]

1、display: none;
2、visibility: hidden;
3、opacity: 0;
4、position: absolute(或fixed); left: -9999px;
5、overflow: hidden;
6、height: 0; width: 0;

[wkxiaweb]

1. display:none; (不占位隐藏)
2. visibility:hidden; (占位隐藏)
3. opacity:0; (占位)
4. width: 0;height: 0; overflow: hidden;(不占位隐藏)
5. position:absolute;left:-999%;(fixed;)( 移出可视区域，不占位)
6. position:relative;left:-999%;( 移出可视区域，占位)
7. transform: scale(0);(缩放，占位)
8. transform: translateY(-999%);(移出可视区域，占位)
9. margin-left:-999%;(移出可视区域，占位)

[riluocanyang]

1、dispaly: none;
2、overflow: hidden;
3、width: 0；height: 0; (针对image)
4、visibility: hidden;
5、opacity: 0;

[lianbo666]

1、visibility：hidden，元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变HTML原有样式；
2、display：none，不占据空间，把元素隐藏起来，可以理解为在页面中把该元素删了；
3、opacity：0，
4、position：absolute，通过将元素的top和left值设为足够大的负数，使其在屏幕上不可见。

[yaxinlove]

1. display:none;
2. visibily:hidden;
   3.overflow:hidden;
   4.opacity: 0;

[Cain-kz]

1.display:none
2.visibly:hidden
3.opacity:0
4.height:0
5.overflow:hidden

[CCZX]

display: none;
visibly: hidden;
opacity: 0;
top: -1000px;
transform: translateX()
height: 0;
overflow; hidden

[lqzo]

• display属性

display: none; 

• 透明度

opacity: 0;

• 可见性

visibily: hidden;

• 色值(楼上@KRISACHAN )

:root {
    --biu: rgba(0, 0, 0, 0);
}
hide {
    border: 1px solid currentcolor;
    color: var(--biu);
    background: currentcolor;
    ...and so on;
}

• HTML hidden 属性

<element hidden>

• clip-path

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

• 层级覆盖

z-index: -1;  // 还有其他条件需要达成

• transform属性

transform: scale(0, 0);

• 元素尺寸

width: 0;
// height: 0;

好多属性和方法是第一次看到，今天又是收获满满的一天呢(^o^)/~
感谢各位大佬的解答，还有夕姐的题目的分享。

[taoyaoyaoa]

display: none;
visibly: hidden;
opacity: 0;
overflow:hidden；
color: transparent；
position:absolute。
小白只能想到这么多，跟大佬们又学习了~开心

[zhangxianhui]

不占位 完全隐藏

display:none
visibly:hidden

透明度隐藏

opacity:0
transparant

属性hidden

层级关系

z-index 看情况而定

尺寸大小

[136548789]

1.display:none
2.visibility:hidden
3.绝对定位（大范围移动position:absolute）
4.层级关系(z-index)
5.透明度隐藏(opacity)
只想到这么多

[TTTTTTTZL]

display：none；
visibilty：hidden；
position：relative；position：absolute； top：-999999999px；
opacity：0；
z-index：-99；
宽高为0；

[gaoluona]

1. display: none;
2. visibilty: hidden;
3. opacity: 0;
4. z-index: -100;
5. height: 0; width:0;
6. position: absolute; top: -99999px;left:-99999px;// 或fixed
7. overflow: hidden;//溢出隐藏

[sinaine]

1.display:none
2.visibilty:hidden
3.position:absolute ;top:-10000px;定位到页面外
4.width:1px;height:0px
5.max-height:0px; max-width: 0px; font-size: 0;
6 .z-index：-999
7. transform: translate(-999px);
8. transform: scale(0);
9.clip-path: circle(0%);
10:文字可以 text-indent: -9999px; 缩进到页面之外
11. opacity: 0;
12. overflow：hidden

[LiMinmumu]

1,display: none;
2,visible: hidden;
3,z-index: -1;
4,opacity: 0;
5,transform: translate(-100%)/translateX(-100%)/translateY(-100%);
6,margin-left: -100%;
7,width: 0;

[yelin1994]

• display:none
• visibility: hidden
• opacity: 0
• height: 0;overflow:hidden
• z-index: -999;position: absolute\relative
• position: absolute;top: -9999px或者left: -9999px
• transform: scale(0)

[lovelycarrot]

• display: none;
• visibility: hidden
• position: absolute/fixed top/left -999px
• transform: translateX/translateY -99999px
• transform: scale(0)
• width: 0; height: 0; overflow: hidden;
• opacity: 0

[xinran1013]

• display: none; /* 不占据空间

• visibility: hidden; /* 占据空间

• position: absolute; top: -999px; /* 不占据空间

• position: relative; top: -999px; /* 占据空间

• position: absolute; visibility: hidden; /* 不占据空间

• height: 0; overflow: hidden; /* 不占据空间

• opacity: 0; filter:Alpha(opacity=0); /* 占据空间

• transform: translate(-100%)/translateX(-100%)/translateY(-100%)

[jodiezhang]

display:none
visibility:hidden
position:absolute; top:-100000px; left:-100000px
transform:scale(0)
z-index:-1
opacity:0
width:0; height:0; overflow: hidden

[tianyuandsb]

1.display: none;
2.visibility:hidden
3.opacity: 0;
4.transparen
5.通过绝对定位脱离文档流，让位置调整到页面外。

[chongyangwang]

设置元素隐藏

1.display:none; /不占位隐藏/
2.visibility:hidden; /z占位隐藏/
3.opacity:0; /透明度隐藏/
4.position /定位属性 可根据场景 设置定位方式 以及值/
5.transparnt /借鉴大佬说的 还没用到过 （好像是针对字体隐藏）/
http://www.imooc.com/article/39998
6. z-index /层级隐藏/
7. font-size:0 /通过字体撑开的元素 可以设置 font-size:0/
8. overflow:hidden: /溢出隐藏/
9.transform:scale(0); /缩放为0 可隐藏/

[MissWXiang]

（1）display：none
（2）设置字体大小为0 font-size：0
（3）层级隐藏： z-index
（4）溢出隐藏：overflow：hidden

（微信名：RUN）

[lydfree]

1）.display:none
2）.visibility:hidden
3）.font-size:0
4）.position定位+z-index
5）.opacity：0

[ivan0525]

• display: none;
• opacity: 0;
• transform: scale(0)
• position定位+z-index
• 通过定位，将元素定位到屏幕外
• visibility: hidden;

[web-data-MrLi]

display:none;的元素会直接从页面上消失，因此在该元素上绑定的事件不会生效。

visibility: hidden;的元素不会触发绑定的事件。

opacity:0; 的元素会触发绑定的事件，例如点击会触发click函数。

z-index层级的设置

position脱离文档流，

overflow：hidden溢出元素的隐藏

[ccvaille]

• opacity: 0;
• display: none;
• visibility: hidden;
• height: 0; overflow:hidden;
• position: absolute; top: -9999px; left: -9999px;
• clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
• transform:scale(0);

[zyq503454535]

1 display:none;
2 width:0 height:0
3 overflow:hidden;
4 opacity:0;
5 z-index : -10
6 transform: translate(-1000px, -100px);

[wangjunw]

1. display:none

2. height: 0; overflow:hidden;

3. position: absolute;top: -10000px;

4. visibility: hidden;

5. opacity: 0;

6: transform: translateX(-1000px);

7. transform: scale(0);

[luohong123]

1. 隐藏 display: none
2. 隐藏 visibility: hidden
3. 绝对定位和层级 position: absolute; z-index: -1;
4. 固定定位 position: fixed; left: -9999px;
5. 位移 transform: translateX(-9999px);
6. 缩小 transform: scale(0);
7. 宽高 width: 0; height: 0;
8. 透明度 opacity: 0;
9. 裁剪 clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

[Diamondjcx]

1.overflow：hidden 直接隐藏元素
不占位、无法交互、
2.display: none
不占位、可以获取元素、不可与其进行交互、子元素设置display:bloclk 无法显示
3.visibility：hidden
占位、可获取元素、可响应用户交互、不可操作DOM、子元素设置visible可显示
4.opacity：0
占位、可操作DOM、子元素设置opacity：1 不可显示
5.position
不占位、不可交互、可获取元素
6.clip-path
.hide-clip {
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
占位、用户无法进行直接交互、可获取元素
7.transform 利用动画
占位、无法与其交互、可获取元素