CSS: Stacking Order Issue - html

Question

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:
.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;
}
<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

Answer 1

You could give an z-index to .tab:hover. The order is given by the order of elements in the DOM so if you give a z-index you create a new stacking order referred to the nearest position relative parent. Smashing magazing has a good post in merit link
.tab {
background: #0AF;
width: 50px;
height: 150px;
position: absolute;
top: -100px;
border-radius: 5px;
transition: all linear 0.2s;
}
.tab:hover {
top: -5px;
z-index: 3;
}
.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;
}
.about {
background: #0AF;
}
.social {
left: 70px;
background: #F05;
}
.projects {
left: 130px;
background: #0F5;
}
<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>

Answer 2

Just Insert z-index:999 to .content
.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;
z-index: 999;
}
.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;
}
<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>