Question

我想在背景上创建一个带有固定谷歌地图的Bootstrap Jumbotron，但在某些方面它并不像我想要的那样。它需要在Bootstrap的jumbotron div下面。
这是我的代码：

<style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 60px;
      }

      /* Custom container */
      .container {
        margin: 0 auto;
        max-width: 1000px;
      }
      .container_jumbo {
        margin: 0 auto;
        max-width: 100%;
      }
      .container > hr {
        margin: 60px 0;
      }

      /* Main marketing message and sign up button */
      #map_canvas {
        margin: 0;
        padding: 0;
        height: 450px;
        width: 100%;
        z-index:-3;
      }
      .jumbotron {
        margin: 80px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 100px;
        line-height: 1;
        z-index:-1;
      }
      .jumbotron .lead {
        font-size: 24px;
        line-height: 1.25;
        z-index:-1;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
        z-index:-1;
      }
...

谷歌地图shizzel

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
  var map;
  function initialize() {
    var mapOptions = {
      draggable: false,
      scrollwheel: false,
      scaleControl: false,
      disableDoubleClickZoom: true,
      zoom: 8,
      mapTypeControl: false,
      disableDefaultUI: true,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

然后，地图必须出现在哪里：

      <div class="masthead">
        <h3 class="muted">Project name</h3>
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>
          </div>
        </div><!-- /.navbar -->
      </div>

      <!-- Jumbotron -->
      <div class="jumbotron">
      <div id="map_canvas"></div>
        <h1>Jobber <sup>beta</sup></h1>
        <p class="lead">Welkom bij Nederland's nieuwste vacaturesite, Jobber! 
                        Op dit moment zijn er <!--Jobcount--> 0 vacatures beschikbaar.                       
                        Zoek jou droombaan!</p>
        <a class="btn btn-large btn-success" href="#">Aan de slag</a>

      </div>
      <hr>
    </div>

我希望它坚持在jumbotron，z-index中的文本下面，我认为......我知道它有错误，但是我没有让它们正常工作，我现在不是一个非常优秀的开发人员

提前致谢
PS。请修复代码，并告诉我为什么我做错了。

Answer 1

您需要将position:absolute提交给map_canvas才能使其落后于文字。由于position:absolute将从页面上的元素流中删除元素。

#map_canvas {
  margin: 0;
  padding: 0;
  height: 450px;
  width: 100%;
  z-index:-3;
  position:absolute;
}

See Fiddle

为什么谷歌地图不显示在我想要的文本后面？

1 个答案: