CODEWITHSUNDEEP
htmlcss
user7618628
user7618628

Reputation:

CSS: Stacking Order Issue

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

Upvotes: 2

Views: 59

Answers (2)

itacode
itacode

Reputation: 3787

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>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12951

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>

Upvotes: 0

Related Questions