私は私のヘッダーボックス影が本体部

Question

私はチュートリアルのための私のポートフォリオを構築していますが、私はいくつかの

の問題点「ボックスシャドウ」と「ヘッダ」を持っているの上部を覆うたいです。私はボックスの影がサイドバーが街の画像の背景をカバーするようなヘッダーをカバーすることを願っています と私は不注意な投稿を申し訳ありません。私は次の質問でもっとうまくいくだろう！ よろしくお願い致します！

私の画像はまだ添付できません。問題があります。このリンクをたどって、私のcodepenを確認してください。https://codepen.io/cjddlr1/pen/YNzPmK

<div class="header" style="box-shadow : 0 3px 15px black;"> 
</div> 

<div class="body"> 
    <div class="row"> 
    <div class="col-xs-2" id="sidebar-left"></div> 
    <div class="col-xs-8" id="contents-section"> 
     <div class="row" id="section1"> 
     <div class="col-xs-4" id="myPicCol"> 
      <img src="http://www.sanviator.com/app/images/logoapple.png" alt="logopic.png" id="myPicture"/> 
     </div> 
     <div class="col-xs-8"> 
      <div class="section1"> 
      <h1>Full-Stack Developer</h1> 
      <h3>My name is Chung Ik Yu.</h3> 
      <p>Currently living in Jinju, South Korea.</p> 
      <p>I'm training my front-end web development skills nowadays.</p> 
      <p>my final goal is emigrating to Canada using my skills and Making A lot of Money to help people around me</p> 
      </div> 
     </div> 
     </div> 
     <div class="row" id="section2"> 
     <div class="col-xs-12"> 
      <h2>SKILLS</h2> 
      <ul> 
      <li>HTML/CSS/BOOTSTRAP : LOW-MID</li> 
      <li>PHP : LOW</li> 
      <li>Javascript : MID</li> 
      <li>jQuery : LOW</li> 
      </ul> 
     </div> 
     </div> 
     <div class="row" id="section3"> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-10"> 
      <h1>Contact</h1> 
      <div class="row"> 
      <div class="col-xs-6"> 
       <p>PHONE : 010-xxxx-xxxx</p> 
      </div> 
      <div class="col-xs-6"> 
       <p>E-MAIL : cjddlr1@coldmail.com</p> 
      </div> 
      </div> 
     </div> 
     <div class="col-xs-1"></div> 
     </div> 
    </div> 
    <div class="col-xs-2" id="sidebar-right"></div> 
    </div> 
</div> 

.header{ 
    height :50px; 
    overflow-x : hidden; 
    background-color:gray; 
    position : relative; 
} 
.body { 
    min-height : 100%; 
    overflow-x : hidden; 
    background-image : url('http://calgaryattractions.com/wp-content/uploads/calgary01.jpg'); 
    background-size : cover; 
} 
.footer { 
    position: relative; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    height: 50px; 
    background : gray; 
    box-shadow : 0px -3px 15px black; 
    overflow-x : hidden; 
} 
#myPicCol { 
    align : center; 
} 
#myPicture { 
    height : 205px; 
    display: block; 
    margin-left : 80px; 
} 
#contents-section { 
    background : white; 
} 
#section1 { 
    padding : 30px 0 30px 0; 
} 
#section2 { 
    padding : 30px 0 30px 95px; 
} 
#section2 li { 
    margin-left : -10px; 
} 
#section3 { 
    padding : 30px 0 30px 0; 
} 
#section3 .col-xs-6 { 
    text-align : center; 
} 
#section3 h1 { 
    text-align : center; 
} 
#sidebar-left{ 
} 
#sidebar-right { 
} 
ul { 
    list-style-type: none; 
} 

Answer 1

はあなた.header

にz-index: 1;

を追加し、影がすべての上に表示されます。