CSS: Box+text over image

Question

Firstly, I would like to show you a image(made in paint).

Okay "current" is what I have now. I want to place a box over the image to the right, with black background, and then have text inside this box.

I tried myself using z-index and so, but without any success. Here's what I tried:

<div> <!-- start div for image -->
  <img style="z-index: -1;" src="1.jpg" width="860" height="240"> <!-- the image -->
</div> <!-- end div -->
<div style="z-index: 1; width: 300px; background: #000; position: relative;">
  <div style="margin: auto;">
    text text text
  </div>
</div>

but this didnt turn out any good. How can i do this?

Answer 1

Something like this?

http://jsfiddle.net/QGMPB/1/

HTML:

<div id="wrap">
    <img src="http://jsfiddle.net/img/logo.png" />
    <div id="text">text</div>
</div>

CSS

#wrap {
    position:relative; /* make this relative to have the inner div absolute without     breaking out */
    width: 200px;  /* fix the width or else it'll be the entire page's width */
    background: silver; 
    border: 1px solid grey
}

#text {
    position: absolute; 
    width: 40px; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background: black; 
    color:white
}