html - CSS:堆叠顺序问题

Question

我目前有几个垂直选项卡，当鼠标悬停时，它们会向下扩展到页面中的内容。当它们向下扩展时，悬停选项卡中的“内容”div 会扩展到选项卡的右侧。除了我似乎无法让“内容”div 出现在其他选项卡之上这一事实之外，我喜欢它的外观。我假设这是由于堆叠顺序，因为当我颠倒顺序时它工作得很好。谁能帮我解决这个问题？我已经尝试过 z-index 和不透明度技巧来让它工作，但到目前为止还没有。我知道 z-index 会根据位置和不透明度更改上下文，但我对此的了解有限。当您提供一个可能的解决方案时，您能解释一下它为什么有效吗？

代码:

.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>

谢谢，杰米

Answer 1

你可以给 .tab:hover 一个 z-index。该顺序由 DOM 中元素的顺序给出，因此如果您提供 z-index，您会创建一个新的堆叠顺序，该顺序引用最近的位置相对父级。粉碎杂志有好帖立功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>