你會如何重疊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>