在iphone中，safari和index不起作用。侧面肚脐的背景重叠问题

Question

屏幕截图

在我的项目中，我面临的问题只有IOS移动页面内容与我的导航栏重叠，但在其他设备上工作得很好。

您可以在下面查看我的网站的网址：

https://webapp.world

附上我的角度项目的CSS和Html代码，供您参考。

提前谢谢。

。

.pushNav {
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 10000;
  overflow: hidden;
  background: #2e2f35;
  transition: ease-in-out 0.5s;
}

.pushNav hr {
  border: 1px solid #555;
}

.pushNav,
.pushNav a {
  font-size: 1rem;
  font-family: helvetica, sens-serif;
  font-weight: 100;
  color: #fff;
  text-decoration: none;
}

.pushNavIsOpen {
  overflow: auto;
  height: 100%;
}

.js-topPushNav.isOpen,
.pushNav_level.isOpen {
  right: 0;
}

.closeLevel,
.openLevel {
  cursor: pointer;
}

.openLevel,
.closeLevel,
.pushNav a {
  padding: 1em 1em;
  display: block;
  text-indent: 5px;
  transition: background 0.4s ease-in-out;
}
.openLevel:hover,
.closeLevel:hover,
.pushNav a:hover {
  background: #494a50;
}

.openLevel span {
  padding: 0 1rem;
}

.hdg {
  background-color: #1e1e24;
}

.closeLevel,
closelevel > i {
  font-size: 1em;
  color: #a5a5a4;
}

.burger {
  overflow: hidden;
  text-align: end;
  cursor: pointer;
  background-color: #eeeded !important;
  -webkit-transform: translate3d(0, 0, 1px);
  transform: translate3d(0, 0, 1px);
  z-index: 9;
  transition: top 0.3s;
}

.burger i {
  font-size: 2.5em;
  color: #ae0000;
}

角html码

<nav>
  <ul class="pushNav js-topPushNav">
    <li class="closeLevel js-closeLevelTop hdg">
      <!-- <i class="fa fa-close"></i> -->
      <i class="bi bi-x-circle"></i>
    </li>

  

      <!-- company  -->

      <li>
        <!-- Begin section 1 -->
        <div class="openLevel js-openLevel">
          <!-- <span>    <i class="bi bi-gear-wide-connected"></i></span> -->
          Services
          <i class="fa fa-chevron-right"></i>
        </div>

        <ul class="pushNav pushNav_level js-pushNavLevel">
          <li class="closeLevel js-closeLevel hdg">
            <i class="fa fa-chevron-left"></i>
            Back
          </li>

          <li>
            <div class="openLevel js-openLevel">
              Mobile App Development
              <i class="fa fa-chevron-right"></i>
            </div>
            <ul class="pushNav pushNav_level js-pushNavLevel">
              <li class="closeLevel js-closeLevel hdg">
                <i class="fa fa-chevron-left"></i>
                Back
              </li>
              <li class="closetab" style="background: #ae0000">
                <a routerLink="mobile-app-development"
                  >Mobile App Development</a
                >
              </li>

              <li>
                <a routerLink="mobile-app-development/ios-application"
                  >iPhone App Development</a
                >
              </li>
              <li>
                <a routerLink="mobile-app-development/IOS-app-developmentq"
                  >Android App Development</a
                >
              </li>
              <li>
                <a routerLink="mobile-app-development/Flutter-app-development"
                  >Flutter App Development</a
                >
              </li>
            </ul>
          </li>
          <li>
            <div class="openLevel js-openLevel">
              Web Development
              <i class="fa fa-chevron-right"></i>
            </div>
            <ul class="pushNav pushNav_level js-pushNavLevel">
              <li class="closeLevel js-closeLevel hdg">
                <i class="fa fa-chevron-left"></i>
                Back
              </li>
              <li class="closetab" style="background: #ae0000">
                <a routerLink="web-app-development">Web Development</a>
              </li>

              <li>
                <a routerLink="web-app-development/ReactJS-development"
                  >ReactJs Development</a
                >
              </li>
              <li>
                <a routerLink="web-app-development/Angular-development"
                  >Angular Development</a
                >
              </li>
              <li>
                <a routerLink="web-app-development/php-development"
                  >PHP Development</a
                >
              </li>
              <li>
                <a routerLink="web-app-development/laravel-development"
                  >Laravel Development</a
                >
              </li>
              <li>
                <a routerLink="web-app-development/NodeJS-development"
                  >NodeJs Development</a
                >
              </li>
              <li>
                <a routerLink="web-app-development/Python-Django-development">
                  Django/Python Development</a
                >
              </li>
            </ul>
          </li>

          <li>
            <div class="openLevel js-openLevel">
              Game Development
              <i class="fa fa-chevron-right"></i>
            </div>
            <ul class="pushNav pushNav_level js-pushNavLevel">
              <li class="closeLevel js-closeLevel hdg">
                <i class="fa fa-chevron-left"></i>
                Back
              </li>
              <li class="closetab" style="background: #ae0000">
                <a routerLink="game-app-development">Game Development</a>
              </li>

              <li>
                <a routerLink="game-app-development/IOS-game-development"
                  >IOS Game Development</a
                >
              </li>
              <li>
                <a routerLink="game-app-development/Android-game-development"
                  >Android Game Development</a
                >
              </li>
            </ul>
          </li>

          <li>
            <div class="openLevel js-openLevel">
              User Experience
              <i class="fa fa-chevron-right"></i>
            </div>
            <ul class="pushNav pushNav_level js-pushNavLevel">
              <li class="closeLevel js-closeLevel hdg">
                <i class="fa fa-chevron-left"></i>
                Back
              </li>
              <li style="background: #ae0000">
                <a routerLink="user-experience">User Experience </a>
              </li>

              <li>
                <a routerLink="user-experience/wireframe-design">Wireframe</a>
              </li>
              <li>
                <a routerLink="user-experience/ui-ux-design">UI/UX Design</a>
              </li>
            </ul>
          </li>

          <li>
            <div class="openLevel js-openLevel">
              Latest Technologies
              <i class="fa fa-chevron-right"></i>
            </div>
            <ul class="pushNav pushNav_level js-pushNavLevel">
              <li class="closeLevel js-closeLevel hdg">
                <i class="fa fa-chevron-left"></i>
                Back
              </li>
              <li class="closetab" style="background: #ae0000">
                <a routerLink="/latest-app-trends">Latest Technologies </a>
              </li>
              <li class="closetab">
                <a routerLink="/latest-app-trends/IOT-development">IOT</a>
              </li>
              <li class="closetab">
                <a routerLink="latest-app-trends/Blockchain-development"
                  >Blockchain</a
                >
              </li>
              <li class="closetab">
                <a routerLink="/latest-app-trends/augmented-virtual-Reality"
                  >AR/VR</a
                >
              </li>
            </ul>
          </li>
        </ul>
      </li>

  

      <li class="">
        <a
          class="nav-link quote_btn"
          [routerLink]="'/apply'"
          routerLinkActive="active-link"
          >Get Quote</a
        >
      </li>


    </div>
  </ul>
</nav>

Answer 1

嘿，用这另一种方法

-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);

尝尝这个

Answer 2

Z-索引应该为同一级别上的元素设置。

您应该在父元素上设置z-index，这样它们就不会被父元素的z索引重置。

要解决问题，可以将#main-wrapper的z-索引(它是.pushNav的父级)设置为任何高于<app-home>的数字。这是我在我的设备上尝试过的。

​

​