Foundation z-index for nested element

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.