html - 尝试将 "drop shadow"应用于页眉和页脚。页脚看起来正确，页眉不正确

Question

我正在尝试将 box-shadow 添加到页眉和页脚。我试图让它看起来像内容区域在背景中，而页眉和页脚有点“跳出”。页脚和页眉的代码是相同的，但只有页脚按照我的意愿应用它。

/* All pages layout */

html {
  background-color: #0294ea;
}

body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0294ea;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

header {
  background-color: transparent;
  color: #FFF;
  margin-top: 20px;
}

header h1 {
  text-align: center;
}

header p {
  text-align: center;
}

.main-head {
  display: block;
  border-bottom: 2px solid #414141;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

.main-body {
  background-color: #FFF;
}

.content-area {
  background-color: #FFF;
  margin-left: 60px;
  margin-right: 60px;
}

.main-foot {
  background-color: transparent;
  display: block;
  border-top: 2px solid #414141;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

footer {
  font-size: 60%;
  text-align: center;
  color: #fff;
}


/* Site navigation */

.navigation {
  margin-top: 20px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
}

.navigation a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 87%;
  color: #FFF;
  padding: 5px 10px;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #a14b56;
}

.navigation a:hover {
  color: #FFF;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #414141;
}


/* Universal float fix */

.fix {
  clear: both;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}


/* Index specific */

.sidebar {
  max-width: 33.33%;
}

.main-body {
  max-width: 66.66%;
}

<header>
  <div class="container">
    <div class="main-head">
      <h1>Welcome to My Page</h1>
      <p>For a Viking lifestyle</p>

      <nav class="navigation">
        <ul class="fix">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<div class="content-area group">
  <div class="container">
    <div class="main-body">

      <h1>Article 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

    <aside class="sidebar">

      <h1>This is the sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </aside>
  </div>
</div>

<footer>
  <div class="main-foot">
    <p>Copyright &copy; 2019 - Marcus Tarang | Learning HTML/CSS</p>
  </div>
</footer>

Answer 1

通过将其位置更改为 relative 强制将标题绘制在主要区域上方(请参阅此 answer ):

/* All pages layout */

html {
  background-color: #0294ea;
}

body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0294ea;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

header {
  position: relative;
  background-color: transparent;
  color: #FFF;
  margin-top: 20px;
}

header h1 {
  text-align: center;
}

header p {
  text-align: center;
}

.main-head {
  display: block;
  border-bottom: 2px solid #414141;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

.main-body {
  background-color: #FFF;
}

.content-area {
  background-color: #FFF;
  margin-left: 60px;
  margin-right: 60px;
}

.main-foot {
  background-color: transparent;
  display: block;
  border-top: 2px solid #414141;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

footer {
  font-size: 60%;
  text-align: center;
  color: #fff;
}


/* Site navigation */

.navigation {
  margin-top: 20px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
}

.navigation a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 87%;
  color: #FFF;
  padding: 5px 10px;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #a14b56;
}

.navigation a:hover {
  color: #FFF;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #414141;
}


/* Universal float fix */

.fix {
  clear: both;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}


/* Index specific */

.sidebar {
  max-width: 33.33%;
}

.main-body {
  max-width: 66.66%;
}

<header>
  <div class="container">
    <div class="main-head">
      <h1>Welcome to My Page</h1>
      <p>For a Viking lifestyle</p>

      <nav class="navigation">
        <ul class="fix">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<div class="content-area group">
  <div class="container">
    <div class="main-body">

      <h1>Article 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

    <aside class="sidebar">

      <h1>This is the sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </aside>
  </div>
</div>

<footer>
  <div class="main-foot">
    <p>Copyright &copy; 2019 - Marcus Tarang | Learning HTML/CSS</p>
  </div>
</footer>