0


我想在背景上创建一个带有固定 Google 地图的 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。请修复代码，并告诉我为什么我做错了。

4

1 回答 1

0

您需要给予position:absolute以map_canvas使其落后于文本。Asposition:absolute将从页面上的元素流中删除元素。

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

见小提琴

于 2013-06-05T18:57:38.037 回答