title: Problems positioning text DIV over image DIV with CSS
body: <p>I'm creating a webpage for my photography and basically I'm trying to create div boxes that contain the images, with a div for text displayed over the image. For some reason I cannot work out how to make the text div position from the image div. For example, currently "top: 8%;" positions the text 8% from the top of the page not the top of the image div, despite the fact that the text div is withing the image div in the code and positioned relatively.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js" lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Josh Graham, amateur photographer&lt;/title&gt;
  &lt;meta name="description" content="Photography by Josh Graham"&gt;
  &lt;meta name="author" content="Josh Graham"&gt;
  &lt;!-- CSS Code --&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;link rel="stylesheet" href="css/reset.css"&gt;
  &lt;link rel="icon" 
        type="image/png" 
        href="images/favicon.png"&gt;
  &lt;!-- JS Code --&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="BROKENjs/script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="wrapper"&gt;
  
  &lt;table id=menu &gt;
  &lt;tr&gt;
  &lt;td id=josh-graham&gt;josh-graham.com&lt;/td&gt;
  &lt;td&gt;Home&lt;/td&gt;
  &lt;td&gt;About&lt;/td&gt;
  &lt;td&gt;Contact&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt; 
  
  &lt;div id="home" data-speed="10" data-type="background"&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="ukrainetext"&gt;
      &lt;img id="ukraine" src="images/ukraine.jpg"/&gt;
      &lt;p id="ukrainetextp"&gt;Chernobyl,&lt;br&gt;Ukraine&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="cornwalltext"&gt; 
      &lt;img id="cornwall" src="images/cornwall.jpg"/&gt;
      &lt;p id="cornwalltextp"&gt;Cornwall,&lt;br&gt;England&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="moscowtext"&gt;       
      &lt;img id="moscow" src="images/moscow.jpg"/&gt;
      &lt;p id="moscowtextp"&gt;Moscow,&lt;br&gt;Russia&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html, body{
      margin:0;
      padding:0;
      height:100%;
      width:100%;
      background: #3e3e3e;
  }
  
  #wrapper {
      min-width: 640px;
      margin-bottom: 0;
  }
  
  #menu { 
      background: #5d5d5d;
      font-family: "Kozuka Gothic Pro";
      font-size: 20px;
      font-weight: lighter;
      color: white;
      height: 50px;  
      margin: 0 auto;
      margin-bottom: 0.3%;
      width: 100%; 
      max-width: 1920px; 
      min-width:640px;
      position: relative; 
      z-index:99;
  }
  
  table td {
      padding-top: 13px;
  }
  
  #josh-graham {
      font-size:25px;
      padding-top: 6px;
      padding-left: 5px;
  }
  
  #ukrainetext {
      position: relative;
  
  }
  
  #ukrainetextp {
      font-family: "Kozuka Gothic Pro";
      font-size: 25px;
      font-weight: lighter;
      color: white;
      position: absolute;
      left: 80%;
      margin-top: 6%;
  }
  
  #ukraine { 
      height: auto;
      margin: 0.3% auto; 
      width: 100%; 
      max-width: 1920px;
      position: relative; 
      float: left;
  }   
  
  #cornwalltext {
      position: relative;
  
  }
  
  #cornwalltextp {
      font-family: "Kozuka Gothic Pro";
      font-size: 25px;
      font-weight: lighter;
      color: white;
      position: absolute;
      left: 80%;
      margin-top: 25%;
  }
  
  
  #cornwall { 
      height: auto;
      margin: 0.3% auto; 
      width: 100%; 
      max-width: 1920px; 
      position: relative; 
      float:left;
  }
  
  
  #moscowtext {
      position: relative;
  
  }
  
  #moscowtextp {
      font-family: "Kozuka Gothic Pro";
      font-size: 25px;
      font-weight: lighter;
      color: white;
      position: absolute;
      left: 80%;
      margin-top: 43.5%;
  }
  
  
  #moscow { 
      height: auto;
      margin: 0.3% auto;
      margin-bottom: 0.3%;
      width: 100%; 
      max-width: 1920px; 
      position: relative; 
      float:left;
  }
  </code></pre>