Question

所以我按照精确的规格构建了布局，但是当我尝试将url="http://192.168.1.1" data="@file.txt"部分（.feat）推到标题元素上时，却遇到了z-index问题。

我读过很多关于将header元素设置为position: absolute; margin-top: -60px;的文章，但这没有做到。

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

这里是my codePen，具有正确的设置。

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

Answer 1

您可以实现此布局，而无需为不同部分使用绝对位置。 Foundation提供了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 。

嵌套元素的基础z-index

1 个答案: