你会如何重叠divs？

Question

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

链接如下设计：

overlaping divs

下面是代码Ive得到了迄今：

<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向下移动一点。然后删除高度属性并调整底部div的填充。

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

.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; }

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