Css 位置：绝对元素弄乱了另一个元素的淡入淡出

我试图淡出一个文本，但它只是弹出到结束状态，中间没有淡出（部分也有延迟）

---

我正在使用CSS进行淡入（

opacity:0/1

和

transform:opacity

），经过大量调试后，我发现这是由于下面一个完全不相关的

位置：绝对
元素造成的。这是一把小提琴：


var$root=$（'.root'）；
$（'#butt_fadetext'）。单击（函数（）{
$root.toggleClass（'dermineyda'）；
});
$（'#butt_hidefance'）。单击（函数（）{
$root.toggleClass（'nofancy'）；
});
.root{
背景色：#b87988；
}
.集装箱{
过渡：不透明度0.5s；
不透明度：1；
高度：100px；
}
.dermineyda.容器{
不透明度：0；
}
.旅馆{
位置：绝对位置；
z指数：1；
}
.无关{
背景颜色：白杏仁；
宽度：100px；
高度：30px；
位置：绝对位置；
排名：0；
左：0；
}
.nofancy，无关{
显示：无；
}

文本
花式外汇
我刚刚了解到，更改元素的顺序可能会改变元素的顺序：

如果将此属性的值与1不同，则会放置元素
在新的堆叠上下文中

解决方案
我通过在堆叠上下文中强制其顺序向上来修复它


var$root=$（'.root'）；
$（'#butt_fadetext'）。单击（函数（）{
$root.toggleClass（'dermineyda'）；
});
$（'#butt_hidefance'）。单击（函数（）{
$root.toggleClass（'nofancy'）；
});
.root{
背景色：#b87988；
}
.集装箱{
过渡：不透明度0.5s；
不透明度：1；
高度：100px；
位置：相对位置；
z指数：500；
}
.dermineyda.容器{
不透明度：0；
}
.旅馆{
位置：绝对位置；
z指数：1；
}
.无关{
背景颜色：白杏仁；
宽度：100px；
高度：30px；
位置：绝对位置；
排名：0；
左：0；
}
.nofancy，无关{
显示：无；
}

文本
花式外汇
我刚刚了解到，更改元素的顺序可能会改变元素的顺序：

如果将此属性的值与1不同，则会放置元素
在新的堆叠上下文中

解决方案
我通过在堆叠上下文中强制其顺序向上来修复它


var$root=$（'.root'）；
$（'#butt_fadetext'）。单击（函数（）{
$root.toggleClass（'dermineyda'）；
});
$（'#butt_hidefance'）。单击（函数（）{
$root.toggleClass（'nofancy'）；
});
.root{
背景色：#b87988；
}
.集装箱{
过渡：不透明度0.5s；
不透明度：1；
高度：100px；
位置：相对位置；
z指数：500；
}
.dermineyda.容器{
不透明度：0；
}
.旅馆{
位置：绝对位置；
z指数：1；
}
.无关{
背景颜色：白杏仁；
宽度：100px；
高度：30px；
位置：绝对位置；
排名：0；
左：0；
}
.nofancy，无关{
显示：无；
}

文本
花式外汇
嗯。。。重新设计代码是没有意义的。您正在使用jquery，所以请使用fadeToggle（…）函数。
好吧。。。重新设计代码是没有意义的。您使用的是jquery，所以请使用fadeToggle（…）函数。
transform:opacity
在我看来是非常简单的CSS。这并不像是重新发明任何东西。此外，
fadeToggle（）
似乎不起作用–文本仍然“弹出”：。请理解它不起作用的原因：
fadeToggle（）
无法避免堆叠上下文的问题。
transform:opacity
在CSS imo中是非常简单的。这感觉不像是重新发明任何东西。此外，
fadeToggle（）
似乎不起作用–文本仍然“弹出”：。请理解它不起作用的原因：
fadeToggle（）
无法避免堆叠上下文的问题。