十三、隐藏元素的方式

一文说清楚css隐藏元素的方式

1. dispaly:none 彻底隐藏元素的方式，不可点击，不占位。

.div1 {
    dispaly:none;
}

2. opacity:0 仅仅只是把元素的透明度设置为0, 占位，可以点击。

.div1 {
    opacity:0;
}

3. visibility:hidden 类似oapacity, 占位，但是不能点击。

.div1 {
    visibility:hidden;
}

4. position 可以把元素移出去。相比之下， opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互。在这种情况下，你只能考虑将元素移出可视区域。这个办法既不会影响布局，有能让元素保持可以操作。

.div1 {
    position: absolute; /*不占为 不可点击*/
    top: -999999px;
    left: -999999px
}
.div1{
    position: relative; /*占位 不可点击*/
    top: -999999px;
    left: -999999px;
}

5. z-index 让其他元素覆盖当前元素。 不占位 不可点击

.div1 {
    position: absolute;
    z-index: -1000;
}

6. transform 占据空间，无法点击

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