Simple CSS text on image layover - html

Question

Hi I am looking to display this text over the image. I want the text to be on the left of the two people, and stay in proportion to the image when moving from a desktop to tablet view in my media queries
here is my HTML
<figure><img src="Sources/USE/colors.png">
<figcaption><h1>Your P<span class="orange">a</span>rtner in<br><br><span class="all"="colorstxt"><span class="green">C</span><span class="yellow">o</span><span class="orange">l</span><span class="red">o</span><span class="pink">r</span><span class="purple">s</span></h1></figcaption>
</figure>
and here is my CSS
#hero_container figure{
position: static;
}
#hero_container figure figcaption{
position: relative;
top: 200px;
left: 100px;
}
I have tried to make it position absolute and relative however it makes the rest of the page jump underneath the image. Any help on a simple question would be appreciated.

Answer 1

You're almost there...
Make the figure position: relative; and the caption absolute positioned.
#hero_container figure{
position: relative;
}
#hero_container figure figcaption{
position: absolute;
bottom: 10%;
left: 10%;
}

Answer 2

Static positioning is the default position for HTML elements. Try using relative positioning on the figure element so your able to absolute position the figure caption relative to the figure element.
#hero_container figure{
position: relative;
}

Answer 3

Static position is default status of position element.
You must use relative position for figure and absolute for caption like so:
#hero_container figure{
position: relative;
}
#hero_container figure figcaption{
position: absolute;
top: 200px;
left: 100px;
}

Answer 4

Here's the modified code -
HTML
<div class="image">
<img src="Sources/USE/colors.png" alt="" />
<h2><span>Your Partner in<span class='spacer'></span><br /><span class='spacer'></span>Colors</span></h2>
</div>
CSS
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
}

Answer 5

Why not have a div float left with a higher z-index? It seems simpler to me.