控制元素層級可通過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

問題：

ios上transform:translateZ(100px) 居然能作用在zindex上，在安卓則正常。

在ios上如果祖先元素沒有overflow:hidden/scroll/auto等限制，則會直接忽略自身和其他元素的z-index層疊順序設定，而直接使用真實世界的3D視角進行渲染。

解決方案：

• 方法1：父級，任意父級，非body級別，設定overflow:hidden可恢復和其他瀏覽器一樣的渲染

• 方法2：都使用3D transform變換。transform: translateZ(100px);

• 方法3：都使用z-index控制

z-index

因而推薦通過transform中的translateZ()或者translate3d()來控制z軸的順序。