我遇到了一個瀏覽器兼容問題，并發(fā)現(xiàn)這是由谷歌chrome和Safari處理z-index和翻譯3D不同造成的。我在這里舉一個最小的例子:

<div>
  <div style="background-color: blue; height: 100px; width: 100px; position: absolute; transform: translate3d(10px, 10px, 10px)"></div>
  <div style="background-color: red; height: 100px; width: 100px; position: relative; z-index: 1"></div>
</div>

Safari在瀏覽器中也將translate3d屬性作為一個層來使用，它有不同的顯示方法，因此如果您使用z-index放置元素，而使用translateZ放置其他元素，translateZ或translate3d將對z-index元素起作用

因此，為了避免safari的問題，我建議你使用translateY和translateX方法，如下文注釋所示，或者將translateZ設(shè)置為與z-index相同

在Safari中有更多關(guān)于它的信息:https://bugs.webkit.org/show_bug.cgi? id = 61824

示例:

.box {
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
  position: absolute;
  /** this works in safari **/
  transform: translateY(10px) translateX(10px);

  transform: translate3d(10px, 10px, 10px);
}

.red {
  background-color: red;
  position: absolute;
  
  /** this desn't work in safari */
  /** transform: translate3d(0, 0, 9px); */
  
  /** need this to work with safari */
  /** transform: translate3d(0, 0, 11px); */

  z-index: 1;
}

<div>
  <div class="box blue"></div>
  <div class="box red"></div>
</div>