title: Position absolute element causing overlap
body: <p>Here's the link structure of the page:</p>
  <pre><code>    &lt;div&gt;
      &lt;h2&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;  class=&quot;button one&quot;&gt;Digital Marketing &lt;/a&gt;
          &lt;a href=&quot;#&quot; target=&quot;_blank&quot;  class=&quot;button one&quot;&gt;Video Production &lt;/a&gt; 
          &lt;a href=&quot;#&quot; target=&quot;_blank&quot;  class=&quot;button one&quot;&gt;Graphics Design &lt;/a&gt; 
      &lt;/h2&gt;&lt;/div&gt;
  </code></pre>
  <p>And the css:</p>
  <pre><code>    .button{
      text-decoration: none;
      color: white;
      font-weight: bold;
      font-size: 20px;
      position: relative;
                      padding: 10px;
                      margin: 10px 20px 30px 0 !important;
  }
                      
  @media screen and (max-width: 800px) {
    .button {
      display:block;
        z-index:above;
    }
  }
  </code></pre>
  <p>It works as intended on a screen bigger than 800px. However on my mobile device, the last link becomes unclickable as it gets overlapped with the next element on the page.</p>
  <p>Is this an issue of CSS position attribute? Please let me know how I can fix this.</p>