Text inside bootstrap carousel active item aligned with and outside text - html

Question

I have this code:
<section class="container">
Logo
</section>
<section class="col-xs-12">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/1500x400/888&text=Item 1" />
<div class="container">My intro</div>
</div>
</div>
</div>
</section>
It's a bootstrap carousel with only one item. The item is a picture and over the picture a text. Here is the jsfiddle code and here is the jsfiddle live example.
The thing is that i want to place the My intro text over the picture (with a margin top 10px) and in the same time to be aligned with the Logo text. How can i do this?

Answer 1

Solved it!
Make both text absolutely position like this jsfiddle
html
<div id="logo">Logo</div>
<section class="col-xs-12" class="slider">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/1500x400/888&text=Item 1" />
<div class="myintro">My intro</div>
</div>
</div>
</div>
</section>
css
.slider {
position:relative;
}
.myintro {
position:absolute;
bottom:10px;
left:10px;
z-index:100;
}
#logo {
margin-left:10px;
}

Answer 2

As anpsmn posted in the comment, seems like this answer was right and here it is:
HTML:
<section class="container">
Logo
</section>
<section class="col-xs-12">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/1500x400/888&text=Item 1" />
<div class="container test-over"><h2>My intro</h2></div>
</div>
</div>
</div>
</section>
CSS:
.test-over h2 {position: absolute; top: 10px;}
Jsfiddle here