位置：绝对元素会使另一个元素褪色

Question

我试图淡化文字，但它只是弹出到最终状态而不会消失（部分延迟）。

我正在使用CSS进行淡入淡出（let snapshotDictionnary = snapshot.value as? NSDictionary 和opacity: 0/1），经过大量调试后，我发现由于完全不相关的transform: opacity元素而发生这种情况下。这是一个小提琴：

＆＃13;

＆＃13;

position: absolute

＆＃13;

var $root = $('.root');
$('#butt_fadetext').click(function(){
  $root.toggleClass('dermineyda');
});
$('#butt_hidefancy').click(function(){
  $root.toggleClass('nofancy');
});

＆＃13;

.root {
  background-color: #b87988;
}

.container {
  transition: opacity 0.5s;
  opacity: 1;
  height: 100px;
}

.dermineyda .container {
  opacity: 0;
}

.inn {
  position: absolute;
  z-index: 1;
}

.unrelated {
  background-color: blanchedalmond;
  width: 100px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
}

.nofancy .unrelated {
  display: none;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

我刚刚了解到，更改元素的opacity可以改变stacking context中的顺序：

  

使用值不同于1的此属性会放置元素   在新的堆叠环境中。

解决方案

我通过在堆叠环境中强制其顺序来修复它。

var $root = $('.root');
$('#butt_fadetext').click(function(){
  $root.toggleClass('dermineyda');
});
$('#butt_hidefancy').click(function(){
  $root.toggleClass('nofancy');
});

.root {
  background-color: #b87988;
}

.container {
  transition: opacity 0.5s;
  opacity: 1;
  height: 100px;
  position: relative;
  z-index: 500;
}

.dermineyda .container {
  opacity: 0;
}

.inn {
  position: absolute;
  z-index: 1;
}

.unrelated {
  background-color: blanchedalmond;
  width: 100px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
}

.nofancy .unrelated {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="root">
  <div class="container">
    <div class="inn">text</div>
  </div>
  <div class="unrelated">fancy fx</div>
</div>
<input type="button" value="fade text" id="butt_fadetext" />
<input type="button" value="hide fancy fx" id="butt_hidefancy" />

Answer 2

嗯......重新发明代码毫无意义。您正在使用jquery，因此请使用fadeToggle（...）函数。