セクションでボックスシャドウが機能しない

Question

セクション内でシャドーを達成できません。それはこのように見えるはずです。

あなたは下の境界線の下にわずかな影を見ています。

私のコードは、次のようになります。

.top-bar { 
    background-color:#e0f2f1; 
    height:50px; 
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2); 
} 

それが動作するように失敗した理由を、私は疑問に思います。たぶん私の構文が正しくないかもしれません。詳細が必要な場合は、Codepen

Answer 1

トップバー

box-shadowにposition: relativeを与える非ここsection

を配置継承のみ上で動作しますあなたは `与えているDemo

* { 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.top-bar { 
 
    background-color:#e0f2f1; 
 
    height:50px; 
 
    box-shadow: 0px 5px 14px green; 
 
\t position: relative; 
 
} 
 

 
.paragraph-container { 
 
    margin:0 auto; 
 
} 
 

 
#top-bar-paragraph { 
 
    text-align:center; 
 
    margin-top:10px; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight:bold; 
 
    font-size:14px; 
 
    opacity:0.7; 
 
} 
 

 
.project-name-class { 
 
    background-color:white; 
 
    height:200px; 
 
} 
 

 
.col-md-8 img { 
 
    margin-top:30px; 
 
    width:100%; 
 
}

<section class="top-bar"> 
 
    <div class="container"> 
 
     <p id = "top-bar-paragraph">this is not official wikipedia page please refer to <a href="https://www.wikipedia.org/" target="_blank">wikipedia.org</a></p> 
 
    </div> 
 
</section> 
 

 
<section class="project-name-class"> 
 
    
 
    <div class="container"> 
 
    
 
    <div class="row"> 
 
     
 
     <div class="col-md-8 col-md-offset-2"> 
 
      
 
     <img src="http://res.cloudinary.com/nzmai/image/upload/v1471508759/Wikipedia-Search_n8wfpx.png" alt="image" /> 
 
      
 
     </div> 
 
     
 
    </div> 
 
    
 
    </div> 
 
    
 
    
 
</section>

Answer 2

で私のプロジェクトを参照してください。親容器全体の高さを50pxに制御しましたが、トップポッドのみにスタイルを与える必要があります。

実際

適用であなたの影が、それはあなたの.container divの背後に隠されている、 あなたは（視覚的にではなく、答えを理解するための）余裕を与えることによって

.top-bar{margin:10px;} 

#top-bar-paragraph代わりの.top-bar

にスタイルを適用していることがわかります

#top-bar-paragraph { 
    background-color:#e0f2f1; 
    height:50px; 
    box-shadow: 0px 5px 14px red; 
} 

フィドルhere