Foundation z-index for nested element - css

Question

so I built my layout to the exact specifications but when I try to push the .feat section up (position: absolute; margin-top: -60px;) over the header element I run into z-index issues.
I've read many posts on setting the header element to position: relative; but that's not doing it.
a visual for you: the image should be over the white background
Here's my codePen with the exact setup.
I would really love to get this, thank you for your suggestions.

Answer 1

You can achieve this layout without using the absolute positioning for your different sections. Foundation offers XY Grid which can be used as demonstrated in the code examples/CodePen link below:
HTML
<div class="grid-container fluid">
<div class="grid-x header">
<div class="cell auto">
<h1>Coming to the Stage</h1>
</div>
</div>
<div class="grid-x grid-margin-x">
<div class="cell medium-8">
<div class="grid-y h-100">
<div class="cell shrink">
<div class="grid-x grid-padding-x synopsis">
<div class="cell medium-4">
<p>Synopsis</p>
</div>
<div class="cell medium-8">
<p>Comedy powerhouse Jim Gaffigan has made a career out of finding the extraordinary </p>
</div>
</div>
</div>
<div class="cell medium-shrink">
<div class="grid-x grid-padding-x metainfo">
<div class="cell medium-4">
<p>Credits</p>
</div>
<div class="cell medium-8">
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<p>Talent</p>
</div>
<div class="cell medium-6">
<p>Jim Gaffigan</p>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<p>Directors</p>
</div>
<div class="cell medium-6">
<p>Aaron Feldman</p>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<p>Producters</p>
</div>
<div class="cell medium-6">
<p>Jim Gaffigans</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cell medium-4">
<div class="grid-x grid-margin-x">
<div class="cell medium-10 feat">
<img src="http://www.comedydynamicsstaging.com/wp-content/uploads/2018/11/unnamed.jpg">
</div>
<div class="cell medium-2 pagination">
1 2 3
</div>
</div>
</div>
</div>
</div>
<div class="grid-container fluid">
<div class="grid-x">
<div class="cell medium-12 extra-meta">
Extra meta
</div>
</div>
</div>
CSS
body {
padding: 0;
margin: 0;
box-sizing: border-box;
background: green;
color: #fff;
text-align: center;
}
.header {
height: 285px;
background: grey;
text-align: left;
padding: 1rem;
}
.h-100 {
height: 100%;
}
.feat img {
margin-top: -60px;
}
.synopsis {
background: red;
height: 100%;
}
.pagination {
background: blue;
}
.metainfo {
background: orange;
height: 100%;
}
#media screen and (max-width: 640px) {
.metainfo {
margin-bottom: 60px;
}
}
.extra-meta {
background: pink;
margin-top: 1rem;
padding: 1rem;
}
CodePen example
Link to CodePen example here.