title: Placing box and text over image z-index
body: <p>I want to place a box and text within this box over an image.</p>
  
  <p>I've managed to place text over the image as you can see on the screenshot below:
  <img src="https://i.stack.imgur.com/Tp5zK.png" alt="enter image description here"></p>
  
  <p>By using this code:</p>
  
  <pre><code>#wrap {
      position:relative; 
      width: 200px;  
      height: 145px;
      border: 1px solid grey
  }
  
  
  
  #text {
  z-index:100;
      position:absolute;    
      color:black;
      font-size:20px;
      font-weight:bold;
      left:10px;
      top:115px;
  }
  </code></pre>
  
  <p>And then calling the function like this:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
      &lt;img src="/wp-content/uploads/2014/03/brandslang.png"/&gt;
      &lt;div id="text"&gt;Brand&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to add a box around the text like this:</p>
  
  <p><img src="https://i.stack.imgur.com/YgvO3.png" alt="enter image description here"></p>
  
  <p>I will of course have to change the text color to white etc. And my idea was to have the text box black and then change the opacity of the box to make it see thru like that.</p>
  
  <p>However I'm not sure how to add this box, I tried setting the background of the #text to black however that didn't work to well as it ended up only painting a box around the text.
  Also I'm not sure how I would be able to change the texts position using that option.</p>
  
  <p>So this is where I was hoping you guys could help me! :)</p>