我希望我的标题框阴影覆盖正文部分的顶部

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

加z-index: 1;

在您的.header

阴影将出现在所有物体上。