如何定位背後的文本元素在引導3

Question

我有一個簡單的引導超大屏幕頁面頂部：

<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裏面，但是在其他一切之後？

可能是相對位置的東西，但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

您可以使用地圖畫布外的「疊加」的元素，並在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