讓一個元素看不見的N種方法

這個內(nèi)容較好理解,不上完整代碼,不截圖!

1、最常用之——display: none;

給元素設(shè)置display: none;后,元素會從頁面中徹底消失,它原本占據(jù)的空間會被其他元素占有,會造成瀏覽器的回流與重繪。

2、最常用之——visibility: hidden;

給元素設(shè)置visibility: hidden;后,元素會從頁面中消失,它原本占據(jù)的空間會被保留,會造成瀏覽器的重繪,適用于希望元素隱藏又不影響頁面布局的場景。

3、隱身大法——opacity: 0;

給元素設(shè)置opacity: 0;后,元素變成透明的我們?nèi)庋劬涂床坏搅耍栽菊紦?jù)的空間還在。

4、設(shè)置盒模型屬性為0

將height、width、padding、border、margin等盒模型屬性的值全設(shè)為0,如果元素內(nèi)還有子元素或內(nèi)容,還應(yīng)overflow: hidden;來隱藏子元素。

.box1 {
        width: 0;
        height: 0;
        padding: 0;
        border: 0;
        margin: 0;
        overflow: hidden;
}

5、最雞賊——設(shè)置元素絕對定位與top、right、bottom、left等將元素移出屏幕。

如:

.box1 {
        position: absolute;
        left: 100%;
}

或:

.box1 {
        position: absolute;
        top: 9999px;
}

6、設(shè)置元素的絕對定位與z-index,將z-index設(shè)置成盡量小的負數(shù)。

但z-index是相對而言的 ,用z-index就要設(shè)置其他元素的z-index值,且如果元素本身占據(jù)空間很大就不一定會被z-index值比它大的元素完全覆蓋,所以不推薦這種方法。
如:

.box1 {
        position: absolute;
        z-index: -9999;
}
.box2 {
        position: absolute;
        z-index: 1;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容