css - 嵌套元素的基础 z-index

Question

所以我按照确切的规范构建了布局，但是当我尝试将 .feat 部分向上推时(position: absolute; margin-top: -60px;)在标题元素上我遇到了 z-index 问题。

我读过很多关于将 header 元素设置为 position: relative; 的帖子，但我没有这样做。

a visual for you: the image should be over the white background

这是 my codePen具有确切的设置。

我真的很想得到这个，谢谢你的建议。

Answer 1

您可以在不对不同部分使用绝对定位的情况下实现此布局。基金会优惠XY Grid可以像下面的代码示例/CodePen 链接中演示的那样使用:

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 示例

链接到 CodePen example here .