javascript - 如何在叠加层上放置文本？

Question

尝试创建一个您可以按下按钮的页面，然后所有以前的文本都会隐藏，并出现一个叠加层，新文本位于其顶部。

我做了所有这些，但新文本仍然被覆盖层遮盖。

有没有办法将文本放置在叠加层上？ (绕口令)现在它就在它后面，有点暗淡/难以阅读。

Codepen here

HTML:

  <div class="row">
    <div class="col-12">
      <h1 class="contact-title">Portland Based</h1>
    </div>
    <div class="col-12 text-center">
      <button type="button" href="#" class="btn btn-outline-warning letsTalk hidden-xs-down" id="contact">Let's talk</button>
      <button type="button" href="#" class="btn btn-warning letsTalk hidden-sm-up">Let's talk</button>
    </div>
    <div class="col-12">
      <div id="another" style="display:none;">
        <center>
          <h2 class="center2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sit doloribus officiis praesentium assumenda,
            quod eaque illum voluptatem voluptatum distinctio.</h2>
        </center>
      </div>
    </div>
  </div>

CSS:

 h2.center2 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Myriad Pro";
    text-align: center;
    top: 70px;
    position: relative;
  }

  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Firefox < 16 */
  @-moz-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Internet Explorer */
  @-ms-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Opera < 12.1 */
  @-o-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

jQuery:

$("#contact").on('click blur keyup', function (e) {
      if ($('#overlay').length == 0) {
        $('body').append('<div id="overlay"> </div>');
        $('h1').hide();
        $('button').hide();
        $("#another").fadeIn("slow");
      }
      if (e.which == 27) {
        $('#overlay').remove();
        $('h1').show();
        $('button').show();
      }
    });

    $('body').click(function (e) {
      if (!$(e.target).is('#contact')) {
        $('#overlay').remove();
        $('h1').show();
        $('button').show();
      }
    });

Answer 1

尝试将 h2.center2 的 z-index 属性设置为 10001

h2.center2 {
  margin: auto;
  width: 60%;
  padding: 10px;
  color: white;
  font-family: "Myriad Pro";
  text-align: center;
  top: 70px;
  position: relative;
  z-index: 10001
}