html - CSS z-index 在 iPhone 上无法正常工作

Question

嗨，我在 ionic 上有这个应用程序，我有一个大盒子，我在里面放了这样的数量:

但是在我的 iPhone 上它是这样显示的: HTML:

    <div class="wrapperz">

        <!--DIT IS BOVENSTE STUKJE-->


        <div class="productimagehead">
            <img class="productimage" src="img/thumb_w800.jpg"/>
            <h1 class="imagetext">Alle producten</h1>
          <div class="menu" ng-click="menuToggle =! menuToggle"><img class="menuicon" src="img/button.svg" alt=""/></div>
          <div class="cart"><a href="#/cart"><img class="carticon" src="img/cartbuttonlight3.svg"/></a>

            <div class="cartamount"><a href="#/cart">{{cartamount}}</a></div>

          </div>
            </div>

        </div>

    <!--END BOVENSTE DEEL-->
  <div class="tableheader">
    <div class="plongtext"><p>Naam</p></div>
    <div class="pmidtext"><p>Prijs</p></div>
    <div class="prighttext"><p></p></div>
  </div>
    <!--BEGIN DE REST-->
    <div class="productlist">
        <div class="producttable">
          <ion-content scroll="false">
            <div ng-model="products" ng-repeat="p in products">

            <div class="products" ng-class-even="'even'" ng-class-odd="'odd'">
                <div class="productlongtext"> <p>{{p.name}}</p> </div>
                <div class="productmidtext" ><p>&euro; {{p.price}}</p></div>
                <div class="productrighttext" ><p> <a ng-click="showOrder = !showOrder"><img class="cartbutton" src="img/cart3.svg"/></a> <a href="#/product/{{p.id}}"> <img class="info" src="img/info.svg" alt=""/></a></p></div>
            </div>
              <div ng-show="showOrder" class="z">
                <div class="order" ng-click="showOrder = !showOrder">
                </div>
                <form name="amountForm" ng-submit="submitForm()" ng-controller="CartAddController" class="productform">
                  <input type="hidden" ng-model="productid" ng-init='productid = [this.p.id]' >
                  <div class="formproductname"><h2>{{p.name}}</h2></div>
                  <div class="formproductprice">Prijs: &euro;{{p.price * amount}}</div>
                  <div class="formproductamount" prd-add ng-model="amount">
                  </div>
                  <div class="formproductadd">
                    <div class="formorderbutton">
                      <button type="submit" class="confirm" ng-click="$parent.showOrder = false"> Verstuur </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <div class="loadmore" ng-click="loadMore()"><p>Laad meer producten</p></div>
          </ion-content>
        </div>
    </div>

我尝试添加 translatez(0)、translate3d 并使用 Z-index 做了很多事情，但无济于事。如果我将输入表单放在我的 html 的最顶部，它会起作用，但我不能 ng-repeat 它。

CSS:

    .wrapperz{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;
        height: auto;
        position: absolute;
   }
        .imagetext{
            position: absolute;
            width: 100%;
            color: #ffffff;
            bottom: 0;
            float: left;
            margin-left: 5%;
        }
    .productimagehead{
            top: 0;
            width: 100%;
            height: 25%;
            position: relative;
        }
        .productimage{
            width: 100%;
            height: 100%;
            position: absolute;
            background-size: 100% 100%;
        }
        .productlogo{
            display: none;
        }
        .menuicon {
            background: none;
            height: 100%;
            float: left;
            margin: 0;
            line-height: 0;
        }
        .cart {
          position: relative;
          height: 30%;
          width: 15%;
          margin-top: 5%;
          padding-top: 5%;
          float: left;

        }
        .carticon {
            background: none;
            height: 100%;
            float: left;
        }
        .cartamount{
            color: #ffffff;
            position: absolute;
            font-size: 70%;
            margin-top: 10%;
            right: 15%;
        }
    .tableheader{
            background-color: #333333;
            border: none;
            height: 10%;
            padding-left: 5%;
            width: 95%;
            position: relative;
            top: 25%;
            font-size: 100%;
        }
        .productlist{
            width: 100%;
            margin-left: 0;
            height: 65%;
            background-color: #ffffff;
            position: absolute;
            float: right;
            top: 35%;
            left: 0;
            right: 0;
          overflow-y: scroll;
          -webkit-overflow-scrolling: touch;
        }
    .producttable{
        width: 100%;
        border: none;
        font-size: 100%;
    }
    .products{
        position: relative;
        width: 95%;
        padding-left: 5%;
        height: 15%;
    }
    .order{
       background-color: #3e3e3e;
       opacity: 0.7;
       height: 100%;
       width: 100%;
       position: fixed;
       z-index: 999;
       top: 0;
       -webkit-backface-visibility: hidden

     }
    .productform{
      top: 0px;
      display: block;
      position: fixed;
      height: 30%;
      width: 70%;
      background-color: #252525;
      color: snow;
      margin-left: 15%;
      margin-top: 40%;
      z-index: 999;
    }
    .z{
      z-index: 1000;
    }

Answer 1

不是真正的修复，但您可以简单地将该元素 (z) 向下移动一点，反正有很多可用空间；)

顺便说一句，tableheader 类没有 z-index，我建议在这里放一些 z-index:-999。