title: Div on top of Div using z-index
body: <p>I have the following divs in my HTML:</p>
  
  <pre><code>&lt;div class="main"&gt;
  &lt;div class="bgimage"&gt;&lt;/div&gt;
  &lt;div class="content"&gt;Text&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>which is directly inside my body.</p>
  
  <p>With the following CSS:</p>
  
  <pre><code>body {
      margin: 0;
      padding: 20px 0;
  }
  .content {
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      opacity: 0.5;
  }
  .content {
      position: relative;
      z-index: 1;
      border: #000 thin solid;
      width: 960px;
      margin-left: auto;
      margin-right: auto;
      background-color: #000;
  }
  .bgimage {
      position: absolute;
      z-index: -1;
      width: 1024px;
      height: 768px;
      margin-left: auto;
      margin-right: auto;
      background-image: url(bg1.jpg);
  }
  </code></pre>
  
  <p>Basically, I have a Div that with a display of a background image, and I will have another Div on top of this with transparency. This current code works, but my problem is when I am trying to take the content div down from the top. </p>
  
  <p>When I add <strong>margin-top:100px</strong>, for example, is also brings the image down. I thought it would not touch it if it is not on the same z-index? Why does adding a margin also force the bgimage div down?</p>
  
  <p>I have also tried making the div with class of content a position of absolute and a zindex, but then this won't centre. How should I solve this?</p>