控制元素層級可通過z-index和transform來實現。
1、通過z-index控制z軸，需要配合position屬性，且position的屬性值為relative、absolute、fixed和sticky時。並且給z-index顯式的設定數值，數值越大，其層級越高。簡單點說，數值越高，元素越在頂上。
2、transform可以通過它的translatez()來改變元素的層疊順序，其值越大，越在頂層，離螢幕越近。不過通過transform:translatez()改變元素z軸的層級，必須在元素的父元素中顯示的設定transform-style: preserve-3d或者在transform中顯示的設定perspective()。
問題：
ios上transform:translatez(100px) 居然能作用在zindex上，在安卓則正常。
在ios上如果祖先元素沒有overflow:hidden/scroll/auto等限制，則會直接忽略自身和其他元素的z-index層疊順序設定，而直接使用真實世界的3d視角進行渲染。
解決方案：
注意：z-index配合偽元素::before或者::after時讓其z軸在元素的底部，特別是碰到大的元素渲染(比如全屏背景圖)，會直接影響效能，特別是在移動端，會造成客戶端閃退，也就是大家所說的crash，給使用者造成非常不好的體驗。
因而推薦通過transform中的translatez()或者translate3d()來控制z軸的順序。
移動端彈窗顯示後，禁止body內容跟隨彈窗滾動
對於一般大小的彈窗可以使用如下方案 1.阻止預設事件 缺點 該方案存在一定的相容性，不是所有瀏覽器都有效。對於彈窗存在滾動的情況，也不適用。優點 彈窗顯示時，頁面仍然固定在原來位置，不會回滾到頂部 阻止彈窗滾動 function stopscroll function recoverscroll f...
網頁彈窗自動點選確認 UI介面移動端彈窗設計（一）
彈窗 彈窗作用 1 中斷使用者當前操作，對其作出補充 2 中斷使用者當前操作，對其作出反饋 彈窗型別 1 模態彈窗 2 非模態彈窗 一 警告框 對話方塊 alert dialog ui介面中最常見的模態彈窗。在ios與material design中分別稱作alert 警告框 與dialog 對話方...
前端 移動端彈窗彈出後禁止頁面滾動
在做專案時，我碰到了乙個問題，當浮層彈出後，浮層後面的內容仍可以滾動。首先我們要明確，當浮層彈出後，我們操作的是body的滾動條，而不是其他div。body出現滾動條。這種問題是應該避免，我認為合理的頁面布局不應該讓body出現滾動條。應該將內容放在div中，讓div出現滾動條，這樣可以很方便的處理...