divをどのように重複しますか？

Question

このサムネイルグリッドを下にある2つの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を少し下に移動できます。次にheightプロパティを削除し、下のdivのパディングを調整します。

また、.instructors-bottom divの場合は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>