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

Question

Hi I have this app on ionic where i have a big box where i put in amounts like this:

but on my iphone it shows it like this: 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>

I tried adding translatez(0), translate3d and did alot of things with Z-index but to no avail. It works if i put the input form at the very top of my html but then i cant ng-repeat it.

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

Not really a fix, but you can simply move that element ( z ) a little bit down, there is a lot of free space anyway ;)

Btw there is no z-index for tableheader class, i would suggest to put some z-index:-999 here.