CSS—隐藏元素：1分钟掌握与使用隐藏元素的方法

互联网
2025-09-22 03:33:02

个人博客：haichenyi 。感谢关注

1. 目录 1–目录2–display:none3–visibility: hidden4–opacity: 05–position: absolute;与 left: -9999px;6–z-index 和 position7–clip-path: circle(0%)

2. display:none

标签会挂载在html中，但是不会在页面上显示，也不会占用页面的空间

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS隐藏元素的方法</title> <style> .displayNone { display: none; } </style> </head> <body> <div>哈哈哈哈</div> <div class="displayNone">displayNone</div> <div>哈哈哈哈</div> </body> </html>

下面是没有display:none的效果图

3. visibility: hidden

标签会挂载在html中，但是不会在页面上显示，会占用页面的空间

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS隐藏元素的方法</title> <style> .visibilityHidden { visibility: hidden; } </style> </head> <body> <div>哈哈哈哈</div> <div class="visibilityHidden">visibilityHidden</div> <div>哈哈哈哈</div> </body> </html>

4. opacity: 0

把标签的透明度设置为0，也就是全透明，用户看不到，标签也就隐藏了。标签会挂载在html中，但是不会在页面上显示，会占用页面的空间

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS隐藏元素的方法</title> <style> .opacity100 { opacity: 1; } .opacity50 { opacity: 0.5; } .opacity20 { opacity: 0.2; } .opacity0 { opacity: 0; } </style> </head> <body> <div>哈哈哈哈</div> <div class="opacity100">opacity100</div> <div class="opacity50">opacity50</div> <div class="opacity20">opacity20</div> <div class="opacity0">opacity0</div> <div>哈哈哈哈</div> </body> </html>

5. position: absolute;与 left: -9999px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS隐藏元素的方法</title> <style> .parent { position: relative; .absoluteLeft0 { position: absolute; left: 0px; top: 0px; } .absoluteLeft50 { position: absolute; left: -50px; top: 50px; } } </style> </head> <body> <div class="parent"> <div class="absoluteLeft0">absoluteLeft0</div> <div class="absoluteLeft50">absoluteLeft50</div> <div>哈哈哈哈</div> </div> </body> </html>

6. z-index 和 position

z-index表示当前元素的层级。这么理解这个层级呢？比方说，你家房子，地上一层，地下一层地下室。地下室就是-1层。对应这里的z-index:-1;你站在地上，看不见地下室。

再说回到元素的层级的问题。你的html文档可见范围就是地上1层。你把元素放到地下室了，自然就看不到了。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS隐藏元素的方法</title> <style> .parent { position: relative; .zIndex { position: absolute; z-index: -1; } .absolute0 { position: absolute; z-index: 1; background-color: white; } } </style> </head> <body> <div class="parent"> <div class="zIndex">z-index为-1</div> <div class="absolute0">哈哈哈哈</div> </div> </body> </html>

7. clip-path: circle(0%) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS隐藏元素的方法</title> <style> .div1 { width: 100px; height: 100px; background-color: aqua; } .div2 { width: 100px; height: 100px; background-color: red; } .div3 { width: 20px; height: 20px; margin: auto; background-color: black; } .div4 { width: 20px; height: 20px; margin: auto; background-color: black; clip-path: circle(50%); } .div5 { width: 20px; height: 20px; margin: auto; background-color: black; clip-path: circle(25%); } .div6 { width: 20px; height: 20px; margin: auto; background-color: black; clip-path: circle(0%); } </style> </head> <body> <div class="div1"></div> <div class="div2"> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> <div class="div6"></div> <div>哈哈哈哈</div> </div> </body> </html>

PS:整篇文章，精炼一下，如下

方式是否占位display:none不占位visibility: hidden占位opacity: 0占位position: absolute; left: -9999px占位(不在可视范围内)z-index 和 position占位(会被其他元素遮挡)clip-path: circle(0%)占位

为啥写的时候会写一句是否会挂载到dom树上，因为，我们使用vue中的v-if，v-show的时候，使用v-if时，元素压根就不会挂载到dom树上，v-show会挂载到dom树上(display:none)，可能刷新页面的时候会存在bug，需要重新渲染，需要使用v-if。这都是后话了。项目中用的时候就知道了。

标签：

CSS—隐藏元素：1分钟掌握与使用隐藏元素的方法由讯客互联互联网栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“CSS—隐藏元素：1分钟掌握与使用隐藏元素的方法”

上一篇
Java数据结构第十五期：走进二叉树的奇妙世界(四)

下一篇
测试向丨多模态大模型能做宠物身份识别吗？