Question

尝试创建一个页面，您可以按一个按钮，然后显示所有以前的文本隐藏和叠加层，并在其上方显示新文本。

我做了所有这些，但是新文字仍然被叠加层遮蔽了。

无论如何将文字放在叠加层上？（绕口令）现在它只是落后于它，有点暗淡/难以阅读。

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

尝试将z-index的{{1}}属性设置为h2.center2

Answer 2

只需从#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; }。

myAction()

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

2 个答案: