title: stack 'a' tag over a 'p' tag
body: <p>What I am trying to do is to stack an 'a' tag on top of a 'p' tag using the <code>z-index</code> property. So my html goes like this</p>
  
  <pre><code>&lt;div id="personalText" &gt;
      &lt;a href="#" id="editButton"&gt; edit &lt;/a&gt;
      &lt;p id="descText"&gt;{{profile.desc}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my <code>CSS</code> goes like this</p>
  
  <pre><code>#editButton
  {
      position:relative;
      z-index:2;
  }
  #descText
  {
      position:relative;
      margin-top: 5px;
      margin-bottom:5px;
      z-index:1;
  }
  </code></pre>
  
  <p>I believe this should stack the <code>a</code> on top of the <code>p</code> tag but that is not happening. Can anybody please explain what is that I am doing wrongly?</p>