[css] 第3天在页面上隐藏元素的方法有哪些？ #8

haizhilin2013 · 2019-04-18T21:24:52Z

[css] 第3天在页面上隐藏元素的方法有哪些？并简述出第一种方法的应用场景和优劣势。

undefinedYu · 2019-04-19T05:28:46Z

position配合z-index; 或者 left/top/bottom/right ： -100%；
margin-left: -100%;
width: 0; height: 0; overflow: hidden;这个算吗
opacity: 0;
display:none;
transform: scale(0)/translateX(+-100%)/translateY(+-100%)/rotateX(90deg);
filter: opacity(0);

yxkhaha · 2019-04-19T13:28:28Z

display: none
opacity: 0
visibility: hidden
z-index: -9999999999999
transform: scale(0)
margin-left: -100%
position: relative; left: -100%
width: 0; height: 0;

Damon99999 · 2019-06-18T02:17:59Z

display: none;
opacity: 0;
z-index: -999;
利用位置属性

MartinsYong · 2019-06-19T04:27:39Z

占位:

visibility: hidden;
margin-left: -100%;
opacity: 0;
transform: scale(0);

不占位:

display: none;
width: 0; height: 0; overflow: hidden;

仅对块内文本元素:

text-indent: -9999px;
font-size: 0;

Konata9 · 2019-07-01T05:40:43Z

利用 dispaly

disaplay: none; 页面不会渲染
visibility: hidden; 页面会渲染只是不限显示
opacity: 0; 看不见，但是会占据空间

利用 position （absolute 的情况下）

left/right/top/bottom: 9999px/-9999px 让元素在视区外
z-index: -9999 放到最底层，同一位置可以让其他元素把这个给遮掉

poporeki · 2019-07-04T14:00:17Z

display:none;
overflow:hidden;
visibility:hidden;
opacity:0;
width:0,height:0;

配合绝对定位

left:-100vw;
right:100vw;
top:-100vh;
bottom:100vh;

放在最底层

z-index:-99999999999

Lianfeiru · 2019-07-29T12:46:20Z

opacity:0; //视觉上的隐藏

display：none；//对页面布局起作用，不会响应任何用户交互

visibility：hidden； //被隐藏的元素不占据任何空间

//屏幕上不可见
position:absolute;
top:-9999px;
left:-9999px;

DingkeXue · 2019-08-14T04:32:12Z

大家都没有说优缺点啊。从性能的角度来说，disaplay: none; 页面不会渲染，可以减少首屏渲染的时间，但是会引起回流和重绘。
visibility: hidden; 页面会渲染只是不限显示。opacity: 0; 看不见，但是会占据空间。只会引起重绘

xcLtw · 2019-08-27T07:25:57Z

这里学到的几个：

transform: scale(0); transform是一个功能丰富的转换函数
margin-left: -100%; 效果一般
visibility：hidden; 隐藏内容，但占位可能保留，效果与 opacity:0一致
width,height,overflow配合，可以达到 display:none的效果

censek · 2019-09-26T08:31:41Z

// div 不占任何位置

display: none;
transform: scale(0);
width: 0;
height: 0;
overflow: hidden;

// div 还在占位

opacity: 0;
visibility: hidden;

RQSA · 2019-10-04T04:54:54Z

display: none

opacity: 0

visibility: hidden

z-index: -9999999999999

transform: scale(0)

margin-left: -100%

position: relative; left: -100%

width: 0; height: 0;

0x3c · 2019-10-14T05:29:41Z

设置不显示: display: none;
隐藏: visibility: hidden;
透明度: opacity: 0;
将元素移动到视口之外( 定位, 负 margin, translate 平移).
元素元素高为 0.
翻转元素, 沿 X/Y 轴旋转到看不见: transform: rotateY(90deg); / transform: rotateX(90deg);

Bravo123 · 2019-10-21T02:24:53Z

补充一个:
transform: skew(90deg, -90deg)

BinghuiXie · 2019-10-21T07:30:06Z

display: none
visibility： hidden
opacity: 0
对应元素的 html 标签上添加 hidden 属性
width: 0; height: 0; overflow: hidden
父元素 overflow: hidden，同时子元素 margin-left: -100%，而且，这种情况有限制：
- 子元素不能设置右浮动 ( margin 的方向与 float 的方向相反，就不起作用 )(我自己只试出来这种情况下不行)
如果子元素是内联元素或者 inline-block 元素，可以在父元素上设置 text-indent: -9999px 使其超出屏幕范围，如果屏幕需要左右滑动，那么最好在父元素上加一个 overflow: hidden

暂时就想到这么多

zlqGitHub · 2019-12-22T00:49:37Z

display: none; 隐藏不占位
visibility: hidden; 隐藏站位
opacity: 0; 设置其透明度为0，视觉上隐藏占位
position: relative; margin-top: -10000px; 设置定位让元素大幅度偏离文档流
transform: scale(0) 设置元素缩放比例为0，起到display:none; 的作用
width:0; height:0; overflow: hidden;

c37csq · 2020-03-04T09:04:29Z

background: transparent;

rennzhang · 2020-03-10T08:46:54Z

<div class="box"></div>

一、全局属性 hidden

hidden：布尔属性表示元素尚未或不再相关。例如，它可以用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会渲染此类元素。不得使用此属性隐藏可以合法显示的内容。

也就是说这个方法隐藏的元素不会在页面中占据位置

<div class="box" hidden></div>

二、`display: none;`

这个属性会让元素在页面中消失，不占据实际的空间

三、`visible:hidden`

这个属性会让元素在页面中'隐身'，也就是说只是单纯的看不见了，但是原来的空间依然被该元素占据

四、使用定位（position）

通过z-index

position: absolute;：让元素脱标，不占实际的位置
z-index: -1;：使用层级隐藏在其他元素之下

.box {
  position: absolute;
  z-index: -1;
}

通过位置或者margin

left: -500%; 、margin-left: -500%;：让元素的位置在当前可是区域之外

.box {
  position: absolute;
  left: -500%;
}

.box {
  position: absolute;
  margin-left: -500%;
}

使用 transform

必须使用position配合，让元素脱标，不然还会占据空间

scale：缩放

.box {
  position: absolute;
  /* 1.缩放 */
  transform: scale(0);
  /* 2.位移 */
  transform: translateX(-200%);
  /* 3.旋转 */
  transform: rotateX(90deg);
}

使用透明度

.box {
  position: absolute;
  opacity: 0;
}

ferrinweb · 2020-03-11T01:04:02Z

在满足 overflow: hidden 时: padding/margin/line-height/text-indent…

larry0442 · 2020-04-07T01:30:13Z

移出屏幕可视范围 margin/定位/transform
宽高为0 width&height/ sacle(0)
透明度 opacity
隐藏 display
隐身 visible

artoriaforDY · 2020-04-21T06:17:19Z

位移：position,margin,transform,text-indent，都设置-9999px；
宽高为0；
display:none；
visibility:hidden；
opacity:0；
用其他模块覆盖住；

blueRoach · 2020-05-14T14:07:02Z

1.display: none
2.visibility: hidden
3.opacity: 0

其他大佬的：
4.全局属性 hidden (不会占据空间，与display:none一样)
5.position:absolute;
(1)z-index: -1
(2)transform:scale(0)
(3)left: -10000%_

giggleCYT · 2020-05-28T02:08:32Z

display:none 页面不渲染
visibility：hidden 页面渲染不显示
opacity：0 元素隐藏，但是如果绑定了事件依旧可以触发
z-index：-9999 在其他元素之下
left/right/top/bottom:：9999px/-9999px 让元素在视区外

lxynew1 · 2020-07-01T01:59:17Z

function delLast(str, target){
				var map = str.split(target);
				var newstr = '';
				console.log(map);
				for(var i = 0;i < map.length;i++){
					if(i === map.length - 1 || i === map.length - 2){
						newstr = newstr + map[i];
					}else{
						newstr = newstr + map[i] + target;
					}
				}
				return newstr;
			}
			delLast('abcc abcdabceabc','abc');

freezebreze · 2020-09-16T15:36:24Z

visibility: hidden;
display: none;
opacity: 0;
z-index: -99999999999;
margin-left: -100%;
transform: scale(0);
width: 0; height: 0; overflow: hidden
text-indent: -9999px;
font-size: 0;

crush2020 · 2021-01-20T02:03:21Z

1.display：none 隐藏元素，页面不会渲染
2.opacity: 0 透明度
3.z-index：0 层级
4.定位到看不到的地方，使用方法有很多
5.visibility: hidden; 页面会渲染，只是不显示

Aizener · 2021-01-21T12:22:54Z

嘿嘿，这个也来答答。
一般来说，使用：display: none;就隐藏了，但是，这个在表单里面使用的时候好像会拿不到值：比如做一个自定义选择框，input元素会隐藏。
所以还有以下方案：

position: absolute;
z-index: -1;
visibility: hidden;

这样就能隐藏而不占位，也会保留表单功能。

Dylan-xu · 2021-01-27T02:08:12Z

display:none;
visibility : hidden;
div{
position: relative;
left: -100%
}
.div{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
};
.div{
width: 0px;
height: 0px;
}

Dylan-xu · 2021-01-27T02:09:46Z

display : none
visibility : hidden
position: relative;
left: -100%
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 0px;
height: 0px;
opacity: 0;

Gun-yx · 2021-02-22T22:52:52Z

display : none

visibility : hidden;

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

margin-left: -100%;

opacity: 0;

font-size:0;

xiezhenghua123 · 2021-04-06T15:18:20Z

display:none
opacity:0;
visibility: hidden

lxt-ing · 2021-04-09T02:53:09Z

1.设置opacity透明度为0
2.设置visibility:hidden;
3.设置display:none；
4.设置宽或者高为0；
5.如果有与其他层级重叠，设置z-index
6.设置位置超出屏幕，如用text-indent，或者margin等

akacaijizhou · 2021-06-28T02:13:35Z

opacity: 0;
z-index: -999999999999;
position: relative;
left: -100%;
transform: scale(0);
display: none;

dengyunsheng250 · 2021-08-21T14:05:25Z

占位:
visibility: hidden;
margin-left: -100%;
opacity: 0;
transform: scale(0);
不占位:
display: none;
width: 0; height: 0; overflow: hidden;
仅对块内文本元素:

text-indent: -9999px;
font-size: 0;

chenpitang221 · 2021-08-26T08:22:06Z

display: none;
opacity:0
设置宽高为0
visibilty: hidden

Hazel-Lin · 2021-09-29T09:33:46Z

display: none; 和 visibility: hidden; opacity: 0; 的区别三者都实现隐藏功能但前者没有渲染该元素后两者者渲染了
transform: scale(0); 标签宽高为0*0 但实际盒子宽高不为0
margin-left: -100%; 改变标签宽高并且多了margin值

amikly · 2021-10-21T20:09:45Z

display:none

将元素设置为display:none后，元素在页面上将彻底消失

元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘

• 读屏软件不会阅读元素中的内容
• 元素将从页面中消失，元素不可见甚至连盒子模型也不会生成，不会占用页面任何空间
• 元素上所有的事件将无法被正常触发
• 子孙元素同时被隐藏
• 该状态下为元素添加其他过渡效果都是无效的，因为切换状态的时候都是立即生效

注意:通过 DOM 依然可以访问到这个元素，因此你可以通过 DOM 来操作它。

visibility: hidden

元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排

• 读屏软件不会阅读元素中的内容
• 元素不会显示，但是依然占据原本该有的空间位置，元素上的点击事件不能被触发
• visibility属性可继承，子元素可以通过设置visibility:visible来实现可见
• 如果子元素为visible，那么子元素的点击事件可被触发，此时visibility为hidden的父级元素的事件会在事件冒泡阶段被触发
• 能够实现动画效果，只要它的初始和结束状态不一样。这确保了 visibility 状态切换之间的过渡动画可以是时间平滑的（事实上可以用这一点来用 hidden 实现元素的延迟显示和隐藏）

适用场景：不希望页面布局会发生变化

opacity: 0

设置元素透明度，设置成0相当于隐藏元素

• 读屏软件会阅读元素中的内容
• 元素依旧存在页面上，并且会占用页面空间位置
• 元素上绑定的事件可以被正常触发；
• opacity可被继承，子元素可以通过设置opacity:1来实现可见

position

将元素移出可视区域，这个办法既不会影响布局，又能让元素保持可以操作

.hide1{
    /* 将元素的position属性设置为absolute，并且top和left设置为极大负值（将元素移出视窗外面） */
    position：absolute; 
    left:-99999px;
    top:-90999px; /* 不占据空间，无法点击 */
}
.hide2{
    /* 将元素的position属性设置为relative，并且top和left设置为极大负值（将元素移出视窗外面） */
    position：relative;
    left:-99999px;
    top:-90999px; /* 占据空间，无法点击 */
}

• 读屏软件会阅读元素中的内容
• 元素依然存在页面上，会影响页面的布局
• 绑定事件可被正常触发
• position属性可被继承（position: inherit），子元素可以通过设置relative、position、fixed、inherit配合top、bottom、right、left值重新进行定位

适用场景：有一个元素你想要与它交互，但是你又不想让它影响你的网页布局

clip/clip-path

clip-path使用裁剪方式创建元素的可显示区域区域内的部分显示，区域外的隐藏。容易实现一些复杂的图形（chrome40+浏览器）

已废弃：clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute的元素。

.hide1{
    position:absolute;/*fixed*/
    clip:rect(top,right,bottom,left);/* 占据空间，无法点击 */
}
.hide2 {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

z-index

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

.hide1{
    position:absolute;
    z-index:-1000;/* 不占据空间，无法点击 */
}

transform

scale() 用于修改元素的大小

.hide1{
    transform: scale(0,0)/* 占据空间，无法点击 */
}

nizuzong · 2021-10-25T02:46:59Z

dispaly: none; 元素消失于文档流
visibility: hidden; 元素占位隐藏；
position定位隐藏，元素消失在可视区域；
opacity: 调整透明度

July107 · 2021-11-01T11:15:42Z

dispaly:none;
width:0;heigth:0;
visibility:hidden;
opacity:0;

tk12138 · 2021-11-04T12:59:37Z

display:none;和visibility:hidden;
display:none;会让元素完全从文档树中消失，渲染时不占据任何空间。属于非继承属性。
Visibility:hidden;不会让元素从文档树中消失，会继续占据空间，只是内容不可见。属于继承属性。

baiye0 · 2021-12-30T07:26:45Z

1.设置opacity透明度为0
2.设置visibility:hidden;
3.设置display:none；
4.设置宽或者高为0；
5.如果有与其他层级重叠，设置z-index
6.设置位置超出屏幕，如用text-indent，或者margin等

yxllovewq · 2022-03-07T08:28:20Z

总结：
display: none;
width: 0;height: 0;overflow: hidden;
visibility: hidden;
opacity: 0;
filter: opacity(0);
transform: scale(0);
index: -9999px;
margin-left;
top; left;right;bottom;
font-size:0;
text-indent: -9999px;

syfine · 2022-04-11T07:49:20Z

影响布局

visibility :hidden
opacity : 0
transform : scale(0)
z-index:-99999999

不影响布局

display : none

kankan-web · 2022-05-11T03:12:00Z

1.display:none;
会导致浏览器的重排重绘
2.overflow:hidden;
会导致浏览器的重绘
3.opacity:0;透明度设置为0
4.z-index:负值;将其被别的元素覆盖
5.position:absolution;移出可视区
6.transform:scale(0,0);缩小为0

xiaoxiaozhiya · 2022-05-26T06:08:45Z

设置visibility:hidden

该属性会被继承
元素不脱标，导致浏览器重绘
点击事件点击不了
可以设置子元素visible，通过事件冒泡来点击

display:none

让元素不会被渲染，不占空间，脱标，引起重排重绘

tansform.scale(0)

和display效果一样
会引起重排和重绘

opacity:0

设置透明度为0，不脱标
可以使用点击事件

绝对定位+z-index

元素脱标，引起重绘和重排
使得元素被压在下方

绝对定位+负margin

元素脱标
元素只是不在视区

www-wanglong · 2022-06-12T13:39:43Z

占位

visibility: hidden
opacity: 0 透明度设置为0
transform: scale(0) 放大0倍
margin-left: -100%

不占位

display: none
width: 0; height: 0; overflow: hidden

WangXi01 · 2022-07-12T09:12:08Z

display:none
visibility:hidden
定位到屏幕外面
z-index负
opacity
transform: scale(0)
宽高设为0

17600774441 · 2022-09-28T05:34:00Z

我来个骚的:
父元素：tranform-style:preserve-3d;
子元素：tranform:rotateY(-180deg);backface-visibility:hidden;
优点：骚；

Iambecauseyouare · 2023-02-10T01:38:11Z

overflow:hidden
opacicty:0
visibility:hidden
display:none
position:absolute
left:-99999px;
top:-99999px;
clip:rect(top,right,bottom,left)
clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px)
z-index:-999
transform:scale(0,0)

kukupii · 2023-02-21T09:42:22Z

display:none;
opaicty:0;
visiblity: hidden;
position为absolute配合z-index:-9999；

keenesun · 2023-10-25T01:09:44Z

#1. visibility: hidden;
#2. display: none;
#3. opacity: 0;
#4. font-size: 0;
#5. z-index遮盖
#6. 定位/偏移

lili-0923 · 2024-02-02T02:04:52Z

display：none；opacity: 0;

haizhilin2013 added the css css label Apr 18, 2019

ForeveHG mentioned this issue Oct 29, 2020

69. 在页面上隐藏元素的方法 ForeveHG/Frontend-Daily-Interview#70

Open

[css] 第3天 在页面上隐藏元素的方法有哪些？ #8

[css] 第3天 在页面上隐藏元素的方法有哪些？ #8

Comments

haizhilin2013 commented Apr 18, 2019

undefinedYu commented Apr 19, 2019

yxkhaha commented Apr 19, 2019

Damon99999 commented Jun 18, 2019

MartinsYong commented Jun 19, 2019

占位:

不占位:

Konata9 commented Jul 1, 2019

利用 dispaly

利用 position （absolute 的情况下）

poporeki commented Jul 4, 2019 • edited

Lianfeiru commented Jul 29, 2019

DingkeXue commented Aug 14, 2019

xcLtw commented Aug 27, 2019

censek commented Sep 26, 2019

RQSA commented Oct 4, 2019

0x3c commented Oct 14, 2019

Bravo123 commented Oct 21, 2019

BinghuiXie commented Oct 21, 2019

zlqGitHub commented Dec 22, 2019

c37csq commented Mar 4, 2020

rennzhang commented Mar 10, 2020

一、全局属性 hidden

二、display: none;

三、visible:hidden

四、使用定位（position）

ferrinweb commented Mar 11, 2020

larry0442 commented Apr 7, 2020

artoriaforDY commented Apr 21, 2020

blueRoach commented May 14, 2020

giggleCYT commented May 28, 2020

lxynew1 commented Jul 1, 2020

freezebreze commented Sep 16, 2020

crush2020 commented Jan 20, 2021

Aizener commented Jan 21, 2021

Dylan-xu commented Jan 27, 2021

Dylan-xu commented Jan 27, 2021

Gun-yx commented Feb 22, 2021

xiezhenghua123 commented Apr 6, 2021

lxt-ing commented Apr 9, 2021

akacaijizhou commented Jun 28, 2021

dengyunsheng250 commented Aug 21, 2021

chenpitang221 commented Aug 26, 2021

Hazel-Lin commented Sep 29, 2021

amikly commented Oct 21, 2021 • edited

display:none

visibility: hidden

opacity: 0

position

clip/clip-path

z-index

transform

nizuzong commented Oct 25, 2021

July107 commented Nov 1, 2021

tk12138 commented Nov 4, 2021

baiye0 commented Dec 30, 2021

yxllovewq commented Mar 7, 2022

syfine commented Apr 11, 2022

影响布局

不影响布局

kankan-web commented May 11, 2022 • edited

xiaoxiaozhiya commented May 26, 2022

www-wanglong commented Jun 12, 2022

占位

不占位

WangXi01 commented Jul 12, 2022

17600774441 commented Sep 28, 2022

Iambecauseyouare commented Feb 10, 2023

kukupii commented Feb 21, 2023

keenesun commented Oct 25, 2023

lili-0923 commented Feb 2, 2024

[css] 第3天在页面上隐藏元素的方法有哪些？ #8

[css] 第3天在页面上隐藏元素的方法有哪些？ #8

poporeki commented Jul 4, 2019 •

edited

二、`display: none;`

三、`visible:hidden`

amikly commented Oct 21, 2021 •

edited

kankan-web commented May 11, 2022 •

edited