Question

我目前有几个垂直标签，当悬停向下扩展到页面内的内容时。随着他们向下扩展，内容＆＃34;悬停选项卡中的div扩展到选项卡的右侧。除了我似乎无法获得＆＃34;内容＆＃34; div显示在其他选项卡的顶部。我认为这是由于堆叠顺序，因为当我颠倒顺序时它工作得很好。任何人都可以帮我解决这个问题吗？我已经尝试过z-index，并且使用不透明技巧让它工作，到目前为止还没有。我知道z-index会根据位置和不透明度改变上下文，但我对此的了解有限。当您提供可能的解决方案时，您能解释一下它的工作原理吗？

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢，杰米

Answer 1

您可以z-index给.tab:hover。顺序由DOM中元素的顺序给出，因此如果您给出z-index，则创建一个新的堆叠顺序，该顺序指向最近的位置相对父级。粉碎magazing有一个很好的职位link

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需将z-index:999插入.content
即可

＆＃13;

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

＆＃13;

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

＆＃13;

CSS：堆叠订单问题

2 个答案: