乙個div 上下兩行 CSS 中的層疊上下文

2021-10-11 14:20:25 字數 2356 閱讀 5436

在使用 bootstrap 的模態框時,出現了半透明遮罩始終蓋住模態框的情況, 只有把模態框的 html 寫到 body 之下才恢復正常, 當時鬱悶得對著螢幕舉了半分鐘的中指。(程式設計師最好看看佛經,學會清心寡欲)

還有些名稱比較類似的學術語言和概念,格式化上下文、執行上下文、音訊上下文、2d上下文等,感興趣地可以去搜一下玩玩。

廢話有些多,下面就正式開始吧!

層疊上下文其實把它理解為 z 軸也沒有問題,螢幕上面疊著一層層圖層(不是所有的元素都是)。層疊水平則表示同一層層疊上下文對應的圖層。

那麼怎樣才能產生層疊上下文,讓它的 z 軸不一樣呢?

以下情況會建立層疊上下文(隨著 css3 屬性還在增加,本表不全):

層疊上下文層級會高於普通元素

此例中 .box1 建立了層疊上下文,z 軸上就比普通元素層級更高了,因此覆蓋了 .box2。

而當有兩個層疊上下文時,它們就有了兄弟和父子關係(假設現在都處於同級層疊水平)。

當為兄弟關係時(層疊上下文的兄弟關係,非 dom 的兄弟),它們總是後者居上的。

父級皆不為層疊上下文,子級層級上為兄弟關係,會對比

當為父子關係時,子級就存在父級的「作用域」內了,父級高我才高,不然我再高也沒用。

父級皆為層疊上下文,子級層級上為堂兄弟關係,只對比父級

注:此處 position: relative; 但不寫 z-index: 0(即 z-index: auto),它會覆蓋普通元素,但並不會建立層疊上下文。 下面這個也是類似的例子,

.box 

.box2

/* 只有 z-index 不為 auto 才建立層疊上下文,所以 .box2 創了,.box1 沒創 */

當父級為層疊上下文時,子級無法再低於父級的層級

既 z-index 不為 auto 的情況,這時它們總是誰大誰上的。

都為層疊上下文時,index 將決定他們的層級

回到最初那個 bootstrap 內容框在黑底下的問題,就很方便理解了。

.modal 和 .modal-backdrop 都定位了,成為了層疊上下文,而如果 .content 由於需要或誤操作也建立了層疊上下文,那麼 .content 和 .modal 就有了兄弟關係,誰後誰上+誰大誰上,最終造成黑底的層級高於了 .content 的層級,而 .modal 作為 .content 範圍內子級也就因此被覆蓋住了。

最終,要麼我們把 .modal 從 .content 拿出放置於與 .modal-backdrop 同級,要麼把 .content 的層級提高得比 .modal-backdrop 更大(如果 .content 還有背景色那就是另一回事了)。

所以個人認為 bootstrap 這樣寫是不好的,要遇上乙個不懂層疊上下文的,想破頭也不知道為什麼。 我推薦下面的這種寫法:(自創的,後來看 layui 等框架也是這樣寫的,看來我沒做錯)

內容

就像張鑫旭大神所說,如果你理解了層疊上下文,那麼就根本不需要把 z-index 設得很大了,1-2 足矣。

在張大神的 此文 中存在著這樣一張圖,一直讓我產生著奇怪的誤解。

後來才想通,這是非層疊上下文時的覆蓋關係,但很容易讓我們產生混淆。

比如 float / inline 等,和 relative 下 z-index 非 auto 一樣,都是會產生覆蓋,但不會建立層疊上下文。

裡面的 background 和 z-index 真的實在是蠱惑人心,個人認為大可忽略不論。

乙個盒子只是顯示兩行

在移動端中高度無法寫死,但標題類的部分有時候是規定只顯示兩行的,設定高度是不行的,用 webkit line clamp屬性,需要和display webkit box和 webkit box origent屬性結合使用。display webkit box webkit line clamp 2 ...

mysql刪除後兩行 刪除某乙個檔案中的後兩行

新建乙個檔案並讓檔案中顯示行號方便後續執行檢視結果 cat b etc passwd a.txt cat a.txt 省略n行 34dhcpd x 177 177 dhcp server sbin nologin 35lisi x 500 500 home lisi bin bash 36zhang...

CSS 讓div在另乙個div中垂直居中

垂直居中是布局中十分常見的效果之一,如果我們想實現下圖的效果 首先我們寫兩個div 下面的介紹中,我們稱外層div為父div,裡面的div為子div 我是需要垂直居中的div 且給兩個div新增最基本樣式 content content div 現在的效果如下 給父div新增下面的樣式即可 box給...