11
使用Bootstrap的本地类，我有一个.list-group-item元素列表，其中有一些可点击的选项，在.dropdown-menu中显示为下拉列表。默认情况下，这可以正常工作，即使一个.list-group-item元素的下拉列表超过了它的下拉列表。添加一个`动画`声明混淆了z-indexes，这种类型的
我已经添加了什么话，是animation声明，通过使用@keyframes动画会从opacity:0到opacity:1在.list-group-item小号变淡。而作为一个副作用，每个.list-group-item元素都会从前一个元素的下拉菜单中直观显示。
（有没有实际参与任何z-index声明，我只用这个词在标题来说明问题的表现）我想知道
是否有某种解决办法的这个满溢问题，这将允许我保持元素的淡入动画？
一个例子，可对下小提琴可以看出（没有的JavaScript涉及或包括有，因为它是不necesarry，因此两者的下拉菜单中只是宣布为HTML代码开放来说明情况）：
https://jsfiddle.net/o8ysz4qp/2/
HTML：
<div class="list-group-item fade-in">
<div class="pull-right dropdown open">
<button class="btn btn-primary">
↓
</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">
↓
</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>
CSS：
.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; }
}
是啊！我猜，为了增加一个评论，（因为我的页面实际上不是由'list-group-item' divs，而是表格行组成的），需要一个'position：relative'声明。 –
顺便说一句，我必须等待23小时，给你200点的赏金奖励，所以像...我不知道... Stackoverflow的东西...我想你会得到它自动时，我接受你的答案，我不知道现在这意味着什么，我可以决定不仅仅因为我是个鸡巴就给你。的Bleh ... –
@ImNotMike你不需要过早地奖励赏金。由于您接受了答案，它将在7天后自动授予（宽限期为8）。见http://stackoverflow.com/help/bounty – Oriol