난 내 헤더 상자 그림자 내가 튜토리얼에 대 한 내 포트폴리오를 구축하고있어 본문 섹션

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;

를 추가하고 그림자가 모든 것을 이상 나타납니다.