title: CSS placing one image on top of another
body: <p>I am working on CSS design template.</p>
  
  <p>I have two images <code>imageOne</code> and <code>imageTwo</code>.</p>
  
  <p>Both are <code>position: relative</code> because if I set one of them <code>position: absolute</code> then it does not stay as responsive anymore and responsiveness is the key here.</p>
  
  <p>What I want is to place <code>imageTwo</code> on top of <code>imageOne</code>.</p>
  
  <p>How can I achieve that while twitterbootstrap's responsive feature still works on these two images?</p>
  
  <p>Below is my code: (jsfiddle available <a href="http://jsfiddle.net/doforumda/uS7nw/1/" rel="noreferrer">here</a>)</p>
  
  <pre><code>&lt;div class="imageOne image"&gt;&lt;/div&gt;
  &lt;div class="imageTwo image"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.image {
      position: relative;
      width: 100px;
      height: 100px;
      border: 1px solid red;
  }
  .imageOne {
      z-index: 0;
  }
  .imageTwo {
      z-index: 1;
  }
  </code></pre>