缩小网页时，引导程序中的两个组件为何相互重叠？

$("#trigger-overlay2").click(function() {
  //	$(this).toggleClass("active");
  $(".overlay-boxify2").toggleClass("open");
});

.overlay-boxify,
.overlay-boxify2 {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-boxify.open,
.overlay-boxify2.open {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  z-index: 9999;
}
.overlay2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/grid.png);
  background: rgba(222, 222, 222, 0.95)
}
@media only screen and (max-width: 1024px) {
  .overlay2 {
    overflow-y: scroll;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<a id="trigger-overlay2" href="#contact">Trigger!</a>
<div class="overlay2 overlay-boxify2">
  <div class="container">
    <div class="row">
      <div class="tos-logo-contact">
        <a href="./index.html">
          <img src="../img/logo.png" alt="logo">
        </a>
      </div>
      <div class="col-md-6">

        <form id='contacts_form' action="#download" class="clearfix contact-list form-horizontal">
          <div class="field-row col-xs-12">
            <input class="form_item form-control" type="text" id="name2" name="name2" placeholder="Name" />
          </div>
          <div class="field-row col-xs-12">
            <input class="form_item form-control" type="email" id="email" name="email2" placeholder="Email" />
          </div>
          <div class="field-row col-xs-12">
            <textarea class="form_item form-control" style="resize:none" cols="30" rows="14" id="message" name="message2" placeholder="Message" title="some placeholder."></textarea>
          </div>
          <div class="field-row col-xs-12">
            <div class="col-xs-6 button-send">
              <input id="sendmessage" type="submit" class="form_submit sendbutton" value="Send" />
            </div>
            <div class="col-xs-6 button-cancel">
              <button id="cancelContact" type="button" name="cancelContact" value="cancel" class="sendbutton">Cancel</button>
            </div>
          </div>
          <div id="contact_results"></div>
        </form>

      </div>
      <div class="col-md-6">
        <div>
          <div class="panel panel-default ">

            <div class="text-center ourOffice">
              <h4>Our Headquater:</h4>
              <div>
                Street
                <br />City, Country
                <br />
                <a href="mailto:[email protected]" target="_top">mail</a>
                <br />
              </div>
              <div id="map1" class="map">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>