überlappen Sie einen Text auf einem Bild mit bootstrap

Question

Dies ist mein erster Beitrag auf stackoverflow!

Ich versuche, einen Text auf einem Div zu überlappen, die ein Bild mit Twitter Bootstrap enthalten. Ich arbeite auf einer Website mit einer PSD und ich muss einige Parallaxes von Text machen, die manchmal einige Bilder halb überlappen.

Aber ich habe gehört, dass Z-Index nicht mit Bootstrap funktionieren, oder?

Ich habe versucht, mit dem thumbnail class Trick, aber es scheint mir nicht eine gute Lösung zu sein. Ich poste meinen Code und ich hoffe, dass mir jemand helfen kann. Vielen Dank.

.thumbnail { 
 
    position:relative; 
 
} 
 

 
.thumbnail_legend { 
 
    background: none repeat scroll; 
 
    opacity: 1; 
 
    left:0; 
 
    position: absolute; 
 
} 
 

 
.organic{ 
 
    margin-top:3%; 
 
} 
 

 
.organic img{ 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="organic container"> 
 
    <div class="row"> 
 
     <h2 class ="col-xs-2 col-xs-offset-2 col-sm-2 col-sm-offset-2 col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2">ORGANIC 
 
     </h2> 
 
     <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7 thumbnail"><img src="elem/photo-1-idea.jpg" alt="organic infusions"/> 
 
     </div> 
 
     <p class="col-xs-4 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 thumbnail_legend"> Nos infusions en tige offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels. 
 
     </p> 
 
    </div> 
 
</div>

Answer 1

so habe ich diese Änderungen vorgenommen und das funktioniert:

.organic{ 
 
    position: relative; 
 
    margin-top:3%; 
 
} 
 

 
.organic img{ 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
.organic h2 { 
 
    position:absolute; top:0; z-index:10; 
 
} 
 
.organic p { 
 
    position:absolute; top:50px; z-index:10; 
 
}

<div class="organic container"> 
 
     <div class="row"> 
 
     <div class="col-xs-7 col-xs-offset-4 col-sm-7 col-sm-offset-4 col-md-7 col-md-offset-4 col-lg-7 col-lg-offset-4"><img src="elem/photo-1-idea.jpg" alt="organic infusions"/></div> 
 
     <h2 class="col-xs-2 col-xs-offset-2 col-sm-2 col-sm-offset-2 col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2"> ORGANIC</h2> 
 
     <p class="col-xs-4 col-xs-offset-2 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2"> Nos infusions en tige offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels.</p> 
 
     </div> 
 
    </div>

Answer 2

Verwendung position:absolute für alle DOM-Element, das Sie setzen wollen über dem Bild.

.thumbnail { 
 
    position:relative; 
 
} 
 
.thumbnail img { 
 
    position:absolute; 
 
} 
 
.thumbnail_legend { 
 
    padding:10px; 
 
    position: absolute; 
 
} 
 

 
.organic{ 
 
    margin-top:3%; 
 
} 
 
.organic h2 { position:absolute;padding-top: 0;z-index:2; padding-left:10px;} 
 
.organic p { position:absolute; padding-top: 15%; z-index:2;} 
 
.organic img{ 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="organic container"> 
 
    <div class="row"> 
 
     
 
     <div class="col-xs-8 col-xs-offset-2 thumbnail"> 
 
     <img src="http://www.kriesi.at/themes/enfold/wp-content/themes/enfold/config-layerslider/LayerSlider/avia-samples/slide2_browser.png" alt="organic infusions"/> 
 
     
 
     <h2>ORGANIC</h2> 
 
     <p class= "thumbnail_legend"> Nos infusions en tige offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels. 
 
     </p> 
 
    </div> 
 
</div> 
 
    </div>