因某些未知原因而移动的元素

Question

每当我将第一个子标题的ID从aulas_subheading_2更改为aulas_subheading_1时。我的布局发生了一些奇怪的事情，aulas_heading_1标题似乎消失了！

它是这样的：

对此：

我用萤火虫检查了这些元素并发现它们位于分隔线后面，aulas_heading1_band，它位于：相对

这里发生了什么？

相关标记：

HTML

 <section id="aulas_container">
  <div id="aulas_container_top">
    <h1 id="aulas_heading_1"><span class="highlight1">Aulas de Inglês</span></h1> 
    <h2 id="aulas_subheading_2">Práticas Imersivas</h2>
    <div id="aulas_heading_band_1"></div>
  </div>
  <div id="aulas_container_bottom">
    <h1 id="aulas_heading_1">Aulas</h1>
    <h2 id="aulas_subheading_2"><span class="highlight2">com Professores Nativos</span></h2>
    <div id="aulas_subheading_band">a</div>
  </div>

CSS

#aulas_container {
  background-position: center top;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  height: 910px;
}

#aulas_container_top {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  height: 50%;
  position: relative;
  background-image: url("http://i.imgur.com/6Tv6r7F.png");
}

#aulas_container_bottom {
  height: 50%;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  background-image: url("http://i.imgur.com/YfxsPWu.jpg");
}

/*                       */
/*         TEXT          */
/*                       */
#aulas_heading_1 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  font-size: 50px;
  text-align: center;
  color: white;
}

#aulas_subheading_1 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  vertical-align: bottom;
  color: white;
}

#aulas_heading_2 {
  color: black;
}

#aulas_subheading_2 {
  font-size: 60px;
  text-align: center;
  vertical-align: bottom;
  color: black;
}

/*                       */
/*  DIVIDERS AND SHAPES  */
/*                       */
#aulas_heading_band_1 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  height: 35%;
  position: relative;
  top: -40%;
  background-color: black;
}

*#aulas_heading_band_1:before {
  content: "";
  position: relative;
  top: -30%;
  background-color: white;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  height: 50%;
  display: block;
  position: relative;
}

#aulas_subheading_band {
  background-color: white;
  height: 10%;
  position: relative;
  bottom: 0%;
}


#aulas_subheading_2_band{
  background-color: $binaryColor0;
  height: 5%;
  }