Z-index and link accesibility

Question

I've looked a bit around, but I haven't found a solution that works for my particular problem. I have a div which acts as a background, so it has to be beneath the rest of the elements, and then another that had to be below that background, but still allow the links to work.

The basic HTML structure is this:

<div class="wrap">
  <div class="cover"></div>
  <div class="container">
    <div class="elem">
        <a href="#">Link</a>
    </div>
  </div>
</div>

And the CSS is:

.cover {
  position: absolute;
  z-index: -1;
}

.elem {
  position: relative;
  z-index: -2;
}

.elem a {
  position: relative;
  z-index: 10;
}

JSFiddle snippet here.

Answer 1

This is the correct answer...

<div class="wrap">
    <div class="cover">
      <div class="container">
          <div class="elem">
              <a href="#">Link</a>
          </div>
      </div>
    </div>
</div>

CSS

.cover {
    height: 200px;
    width: 300px;
    margin-left: 100px;
    margin-top: 50px;
    background-color: orange;
    position: absolute;
    z-index: 0;
}

.elem {
    background-color: green;
    height: 150px;
    width: 250px;
    position: relative;
    z-index: 2;
}

.elem a {
    color: white;
    position: relative;
}

Answer 2

I can't see a reason to use negative z-index, as this should work:

.cover {
    position: absolute;
    z-index: 1;
}

.elem {
    position: relative;
    z-index: 0;
}

.elem a {
    color: white;
    /* not needed */
    /*position: relative;
    z-index: 10;*/
}

Demo