CSS z-index not working properly on iphone - html

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"><img class="carticon" src="img/cartbuttonlight3.svg"/>
<div class="cartamount">{{cartamount}}</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>€ {{p.price}}</p></div>
<div class="productrighttext" ><p> <a ng-click="showOrder = !showOrder"><img class="cartbutton" src="img/cart3.svg"/></a> <img class="info" src="img/info.svg" alt=""/></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: €{{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.