Question

我的页面顶部有一个简单的Bootstrap Jumbotron：

<div class="jumbotron">
    <div class="container">
        <h1>My fancy map site</h1>
        <p>Some stuff here</p>
        <p><a href="somePage'" class="btn btn-primary btn-lg" role="button">I'm a button</a></p>
    </div>
</div>

我想要做的是在Jumbotron中嵌入一个元素作为背景，更具体地说是一个地图（可能是Google地图）。我如何将它定位在Jumbotron中但是在其他所有内容之后？

可能是相对位置的东西，但css确实不是我的强项。

Answer 1

检查此JsFiddle链接 - http://jsfiddle.net/ravk26/ApSC3/

这是html和css：

<强> HTML：

<div class="jumbotron">
<div class="container">
    <div class="map"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26081603.294420436!2d-95.677068!3d37.06250000000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1395991829737" width="100%" height="100%" frameborder="0" style="border:0"></iframe></div>
    <h1>My fancy map site</h1>
    <p>Some stuff here</p>
    <p><a href="somePage'" class="btn btn-primary btn-lg" role="button">I'm a button</a></p>

</div>

<强> CSS：

.jumbotron { border: 1px solid #d4d4d4; background: transparent; padding: 10px; position: relative; }

.map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; }

希望它会对你有所帮助。

Answer 2

你可以使用＆＃34;叠加＆＃34; map-canvas外部的元素，以及它在jumbotron ...

上的相对位置

#map-canvas {
  height:       450px;
  z-index:      -1;
}

#overlay {
  background:   #fff;
  opacity:      .8;
  position:     relative;
  top:          -300px;
  padding:      10px;
  z-index:      2;
  margin:       0 auto;
  width:        600px;
  border-radius:5px;
}

演示：http://www.bootply.com/125543

如何在Bootstrap 3中将元素置于文本后面

2 个答案: