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

你可以给一个z-index到.tab:hover。该顺序由DOM中元素的顺序给出，因此如果您给出z-索引，则创建一个新的堆栈顺序，称为相对父项的最近位置。粉碎magazing有优点好的帖子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

只需插入z-index:999到.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>