iOS16中，Safari iPhone上的Z-index无法生效-PHP中文网问答

我有一个导航栏，在移动模式下，例如在Safari浏览器上的iPhone上，将这个类navbar-mobile应用到具有javascript的nav元素上。

但不知何故，导航栏不会显示在顶部。

.navbar-mobile {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  -webkit-transform: translate3d(0,0,0);
  z-index: 999 !important;
  -webkit-overflow-scrolling: auto !important;
  margin-top: 0;
}

这在所有部分都发生。这些部分位于应用了tsparticles组件的body内，如下所示。

section {
  transition: ease-in-out 0.3s;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 997;
  overflow-y: auto;
}

<body id="tsparticles"></body>

body {
  font-family: "Open Sans", sans-serif;
  background-color: #040404;
  color: #fff;
  position: relative;
  background: transparent;
  z-index: -1;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  width:100vw;
  height:100vh; 
}

/* ---- tsparticles container ---- */
#tsparticles {
  width: 100%;
  height: 100%;
  z-index: -1;
}

我已经尝试使用-webkit-transform: translate3d(0,0,0);，但不幸的是，我无法解决这个问题。这在其他浏览器中可以工作，唯一的问题就是在iPhone上的Safari浏览器。

.navbar-mobile { position: fixed; top: 0; . . z-index: 9; } section { transition: ease-in-out 0.3s; position: relative; . . z-index: 5; } body { font-family: "Open Sans", sans-serif; background-color: #040404; color: #fff; . . z-index: -1; //(或者尝试1) }