如何在叠加层上放置文字？

Question

尝试创建可以按按钮的页面，然后所有先前的文本都隐藏起来，并在其顶部显示一个覆盖着新文本的覆盖图。

我做了所有这些工作，但是新文本仍然被叠加层遮盖。

无论如何，是否可以将文本放置在叠加层上？ （绕口令）现在它就在它后面，有点模糊/难以阅读。

Codepen在这里

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属性h2.center2为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
}

Answer 2

只需从#overlay删除background-color #overlay 。

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  z-index: 10000;
  display: block;
}