Css 添加“animation”声明会弄乱z索引，有点像

使用Bootstrap的本机类，我有一个

.list组项

元素的列表，其中有一些可单击的选项，在

.dropdown菜单中显示为下拉菜单

。默认情况下，即使一个

.list group item

元素的下拉列表覆盖在它下面的元素上，也可以正常工作

然后，我添加了一个

动画

声明，该声明通过使用

@关键帧

动画从

不透明度：0

变为

不透明度：1

在

列表组项

中淡出。作为一个副作用，每个

.list组项

元素都会从上一个元素的下拉菜单中可视出来

（实际上没有涉及任何

z-index

声明，我只是在标题中使用该术语来说明问题的表现形式）

我想知道是否有一些解决这个溢出问题的方法，可以让我保持元素的淡入动画

可以在下面的fiddle上看到一个示例（这里没有涉及或包含javascript，因为它不是必需的，所以这两个下拉列表都在HTML代码中声明为打开，以说明这种情况）：

HTML:

---

问题在于，当不透明度不是1时，它会创建一个新的堆叠上下文（请参见）

一种解决方案是添加一个

z-index

（因为它在不透明度更改后变得可用）并反转其值（最后一个具有最低的

z-index

等）

比如（假设他们是兄弟姐妹）

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.list组项：第n个最后一个子项（1）{z-index:1}
.list组项：第n个最后一个子项（2）{z-index:2}
.list组项：第n个最后一个子项（3）{z-index:3}
.list组项：第n个最后一个子项（4）{z-index:4}
.list组项：第n个最后一个子项（5）{z-index:5}
.list组项：第n个最后一个子项（6）{z-index:6}
.list组项：第n个最后一个子项（7）{z-index:7}
.淡入{
不透明度：0；
动画：淡入。5s轻松；
动画填充模式：正向；
动画延迟：1s；
}
@关键帧淡入{
从{opacity:0；}
到{opacity:1；}
}

&达尔；






Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

&达尔；






Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

正如Gaby所解释的，动画

不透明度

建立了堆叠上下文

因此，不要在每个

.list组项目上设置不透明度的动画，而应该将它们全部放在一个容器中，并在那里设置
不透明度的动画


@import'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
身体{
不透明度：0；
动画：淡入淡出；
动画填充模式：正向；
}
@关键帧淡入{
从{opacity:0；}
到{opacity:1；}
}

&达尔；






Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

&达尔；






Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

是的！我想再加一句话，（因为我的页面实际上不是由
列表组项组成的，而是由表行组成的），需要一个
位置：相对的
声明。顺便说一句，我要等23个小时才能给你200分的赏金，就像。。。我不知道。。。堆栈溢出的东西。。。我以为当我接受你的答案时你会自动得到它，我现在不知道这意味着什么，我可以决定不给你就因为我是个混蛋？哎呀…@ImNotMike你不必过早地给悬赏金。既然您接受了答案，那么它将在7天后自动授予（有8个宽限期）。请参阅@ImNotMike，请记住，我给出的示例代码只涉及7个兄弟组。您应该添加更多的规则来处理更多的行（如果您是这样的话）
<div class="list-group-item fade-in">
  <div class="pull-right dropdown open">
    <button class="btn btn-primary">
      &darr;
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
</div>

<div class="list-group-item fade-in">
  <div class="pull-right dropdown open">
    <button class="btn btn-primary">
      &darr;
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet</p>
</div>

.fade-in {
  opacity: 0; 
  animation:fade-in .5s ease; 
  animation-fill-mode: forwards;
  animation-delay:1s;
}
@keyframes fade-in {
  from { opacity:0; }
  to { opacity:1; }
}