css如何隐藏一个元素

方式 占据空间 触发事件
display:none
visibility:hidden
opacity:0
position:absolute
z-index:-1
transform:scale(0,0)

✅❌

display: none: 渲染树不会包含该染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。

visibility: hidden: 元素在页面中仍占据空间,但是不会响应绑定的监听事件

opacity: 0: 将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件

position: absolute: 通过使用绝对定位将元素移除可视区域内

z-index: 负值: 来使其他元素遍盖住该元素

transform: scale(0,0): 将元索缩放为 0

相关推荐
Highcharts13 小时前
用Highcharts如何动态向一个序列添加点-示列讲解
前端
weixin_4316004413 小时前
做 Agent 会用到的 Node API(4):取消与 AbortController
前端·学习·ai·agent·ai编程
JiaLin_Denny14 小时前
Vue3中ref和reactive用法与双向数据绑定
前端·javascript·vue.js
用户21816970493014 小时前
Flutter(十)Container Center Align
前端
无人生还14 小时前
从 Vue3 到 React · 快速上手系列第 12 篇:并发特性与性能优化
前端·vue.js·react.js
小p14 小时前
nextjs学习9: Next.js 渲染与缓存
前端·后端
乘风gg14 小时前
AI 时代,你的编程能力在第几层?我敢说,大多数人卡在第一层
前端·ai编程·claude
东风破_14 小时前
React Router v7 实战:用路由配置、懒加载与嵌套路由搭建一个完整的 SPA
前端
引山洪0814 小时前
Babylon.js 8.x 中文文档整理——Node篇 (上)
前端·webgl
柒和远方14 小时前
V058:前端路由的第一性原理:从 hashchange 手写路由,到 React Router 的嵌套与懒加载
前端·javascript·react.js