Question

让这个缩略图网格与两个底层div（白色和灰色背景）重叠的理想方法是什么？我使用Foundation 6进行这个项目，但还没有成功。我知道我应该使用z-index但它不起作用。有什么见解吗？

以下设计链接：

以下是我到目前为止的代码：

<section class="instructors">
<div class="instructors-top">
  <h4>MEET OUR INSTRUCTORS</h4>
</div>
<div class="instructors-pic">
  <ul class="small-block-grid-3">
    <img src="images/kermit.png">
    <img src="images/patches.jpeg">
    <img src="images/chef.jpg">
    <img src="images/ButtersStotch.png">
  </ul>
  <ul class="small-block-grid-3">
    <img src="images/PeterGriffin.jpg">
    <img src="images/Eustace.jpg">
    <img src="images/homer.gif">
    <img src="images/buck.jpg">
  </ul>
</div>
<div class="instructors-bottom">
  <p>
    Each of our instrutors are the perfect combo of support and encouragement.<br>
    They are here to help you meet your goals and become a better mind here.
  </p>
</div>

和css：

.instructors-top {
  height: 200px;
  background-color: white;

}

.instructors-top h4 {
  color: gray;
  font-size: 14px;
  text-align: center;
  padding-top: 55px;
  z-index: 1;
}

.instructors-bottom {
  background-color: #e4e5de;
  height: 300px;
  padding-top: 150px;
  z-index: 1;

}

.instructors-bottom p {
  color: gray;
  text-align: center;
}

.small-block-grid-3 img{
  height: 100px;
  width: 100px;
  padding: 5px;

}

.instructors-pic {
  margin: auto;
  position: absolute;
  z-index: 2;
}

Answer 1

您可以使用position属性将底部div向下移动一点。然后删除height属性并调整底部div的填充。

另请注意，您在z-index; div的CSS中有.instructors-bottom。除非您还为该选择器添加了z-index属性，否则position不会任何。例如：z-index选择器中的.instructors-top h4根本没有做任何事情，可以删除。

＆＃13;

.instructors-top {
  height: 100px; /* ------------- adjusted for snippet */
 background-color: #fff;
}

.instructors-top h4 {
  color: gray;
  font-size: 14px;
  text-align: center;
  padding-top: 55px;
  z-index: 1;
}

.instructors-bottom {
  background-color: #e4e5de;
  padding: 70px 0 40px 0; /* ------------- adjusted */
  z-index: 1;
  position: relative;   /* ----------------- added */
  top: 200px; /* ------------------ added */
   /* ----------------------- removed height */

}

.instructors-bottom p {
  color: gray;
  text-align: center;
  padding: 0 30px; /* ------------- adjusted for snippet */
}

.small-block-grid-3 img{
  height: 100px; 
  width: 100px;
  padding: 5px;

}

.instructors-pic {
  margin: auto;
  position: absolute;
  z-index: 2;
}

   span { color: #f00; }

＆＃13;

<section class="instructors">
<div class="instructors-top">
  <h4>MEET OUR INSTRUCTORS</h4>
</div>
<div class="instructors-pic">
  <ul class="small-block-grid-3">
    <img src="http://placehold.it/150x150">
    <img src="http://placehold.it/150x150">
    <img src="http://placehold.it/150x150">
    <img src="http://placehold.it/150x150">
  </ul>
  <ul class="small-block-grid-3">
    <img src="http://placehold.it/150x150">
    <img src="http://placehold.it/150x150">
    <img src="http://placehold.it/150x150">
    <img src="http://placehold.it/150x150">
  </ul>
</div>
<div class="instructors-bottom">
  <p>
    Each of our instructors <span>[FIXED TYPO]</span> are the perfect combo of support and encouragement.They are here to help you meet your goals and become a better mind here.
  </p>
</div>
</section>

＆＃13;

你会如何重叠div？

1 个答案: