i页面中,隐藏元素的9种方法:
- display:none; /* 元素在页面上消失。会影响布局 */
- visibility:hidden; /* 不影响布局,点击被隐藏元素无效 */
- opacity:0; /* 元素透明了,不影响布局,点击被隐藏元素有效 */
- width/height:0; /*影响布局,元素存在页面,只是显示的面积为 0了 */
- clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);/不影响布局,点击被隐藏元素无效/
- transform:scale(0,0)/rotateX(90deg)/rotateY(90deg);/* 不影响布局 */
- position:absolute;
top/left:-9999px; /* 元素显示在屏幕的显示范围之外 */ - position:absolute
z-index:-999;
left/top:? /* letf和top看情况设置,目的是将被元素放在在其他元素后 ,达到看不到该元素的效果 */ - 父级元素:{ overflow: hidden;}
被隐藏的子元素{ position: relative;top: ?; } /* letf和top看情况设置!!利用超过父元素的部分会被隐藏的原理。把 要被隐藏的子元素的位置,设置在父级范围之外 ,达到隐藏元素的效果。不能点击被隐藏元素*/