I currently have a few vertical tabs that when hovered expand down toward the content within the page. As they expand down, a "content" div within the hovered tab expands out to the right away from the tab. I like the way this looks aside from the fact that I can't seem to get the "content" div to appear on top of the other tabs. I would assume that this is due to stacking order since when I reverse the order it works just fine. Can anyone help me resolve this issue? I've tried z-index, and opacity tricks to get it to work and nothing so far. I understand that z-index changes context based on position and opacity but my knowledge on this is limited. When you supply a possible solution, can you explain why it works?

Code:

```css
.tab {
  background: #0AF;
  width: 50px;
  height: 150px;
  position: absolute;
  top: -100px;
  border-radius: 5px;
  transition: all linear 0.2s;
}
.tab:hover {
  top: -5px;
  border-bottom-right-radius: 0px;
}
.content {
  position: absolute;
  left: 0;
  width: 50px;
  height: 150px;
  background: #EEE;
  border-radius: 5px;
  transition: all linear 0.2s;
  opacity: 0;
  text-align: center;
  color: #222;
}
.content .foot {
  position: absolute;
  bottom: 0;
  margin-left: -50px;
  margin-bottom: 5px;
}
.tab:hover > .content, .content:hover {
  left: 40px;
  width: 300px;
  opacity: 1;
  border-bottom-left-radius: 0px;
}

.about {
  background: #0AF;
}

.social {
  left: 80px;
  background: #F05;
}
.projects {
  left: 150px;
  background: #0F5;
}
```

```html
<div class="tab about">
  <div class="content">
    <span class="foot">About Me</span>
  </div>
</div>
<div class="tab social">
  <div class="content">
    <span class="foot">Social Media</span>
  </div>
</div>
<div class="tab projects">
  <div class="content">
    <span class="foot">Projects</span>
  </div>
</div>
```

Thanks,
Jamie