方式 | 占据空间 | 触发事件 |
---|---|---|
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