title: Overlapping images in CSS with divs
body: <p><img src="https://i.stack.imgur.com/5ZZU7.jpg" alt="enter image description here"></p>
  
  <p>I have 2 images I would like to look similar to this photo (sorry about the quality, the PSD for the site is scattered so I whipped an image together in a few mins to show what I meant).</p>
  
  <p>My first image is the logo - which is a png of the guy with glasses, the trail and the title.</p>
  
  <p>The second image is the blue box, which I would like to be a form for users to put their email address on.</p>
  
  <p>My HTML tags are this:</p>
  
  <pre><code>&lt;body id="home"&gt;
      &lt;div id="main" method="post" action=""&gt;
      &lt;img id="Smarty" src="images/logo.png" /&gt;
  
  &lt;/div&gt;
  
         &lt;div id="box" method="post" action=""&gt;
         &lt;img id="Form" src="images/form.png" /&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And my css follows:</p>
  
  <pre><code> #home #main {
  margin-top: 10%;
  margin-right: auto;
  margin-left: auto; }
  
   #home #main #box {
  
  margin-right: auto;
  margin-left: auto; }
  </code></pre>
  
  <p>The goal is to have the image looking like the attached photo, with it all centered relative to the size of the users screen.  I already have the background working to scale accordingly, but cannot for the life of me figure out how to overlap existing PNGs in CSS with % values rather than fixed pixel values.</p>
  
  <p>Thanks for any guidance!</p>
  
  <p>EDIT:</p>
  
  <p>This code puts my logo in the right place (center and 8% down from the top of the page):</p>
  
  <pre><code>  #wrapper #main {
  
  margin-top: 8%;
  margin-right: auto;
  margin-left: auto;
  text-align:center; 
  display:block; }
  
  
    #wrapper #main #box{
  
  margin-top: 8%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  text-align:center;
  display:block; }
  </code></pre>
  
  <p>But the box is still below the logo, and to the far left.</p>