在使用 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給...