更改按钮的不透明度会导致它在父元素上呈现答案

【问题标题】：Changing opacity of button causes it to be rendered over parent elements更改按钮的不透明度会导致它在父元素上呈现
【发布时间】：2020-01-18 01:05:53
【问题描述】：

我正在使用 React 开发一个配置页面。我有一个显示在表格中的可配置元素列表，并且“保存”按钮被禁用并变为透明，直到修改数据字段，此时按钮被启用并变得完全不透明。

但是，当按钮处于禁用状态时，按钮会呈现在父元素之上，例如粘性表格标题和导航栏。这在滚动时变得非常明显。启用按钮可以解决问题，并且不再在父元素上呈现。

目前我正在使用 react-bootstrap Button 组件来呈现按钮，但使用常规 HTML 按钮会产生相同的结果。似乎禁用按钮或单独更改不透明度字段也会导致问题。

<td className="saveButton">  
  <Button
    variant="primary"
    id={this.props.id}
    disabled={!this.state.modified} //Only enable saving after data has been modified
    style={this.state.modified ? {opacity: 1} : {opacity: 0.3}}
    onClick={this.updateListItem}
  >Save</Button>
</td>

按钮应该与表格行的其余部分一起消失在粘性表格标题和导航栏下方，但处于禁用状态的按钮最终会呈现在顶部，如下所示：

（注意启用的按钮在表格标题下方正确滚动）

任何想法我哪里出错了？

【问题讨论】：

Save All 和 Add 按钮所在的“粘性表格标题”是吗？尝试在标题 hr 中添加 z-index: 1 或更大。
是的，那是表格标题，随着视口向下滚动。向<tr> 或<th> 元素添加z-index 并没有什么不同。这个错误似乎发生在 1 以外的任何不透明度

标签： css reactjs bootstrap-4

【解决方案1】：

我能够通过使用粘性标题的基本表格布局重现您的错误。如果您取消注释th 中的z-index，您将看到它解决了问题。 https://codepen.io/sallf/pen/BaaBwmR

您只显示了表格内的按钮，所以我不知道您是如何设置表格的，但这似乎是一个可能的解决方法。

th {
  position: sticky;
  top: 0;
  background: white;
  // Remove z-index and td will appear
  // to be over the td
  z-index: 1;
}

至于为什么会这样，我真的不知道。对我来说，这似乎是浏览器中的一个错误，但如果有人知道更多，我会很好奇。

更新

这是因为opacity 小于1 creates a new stacking context 的任何元素。堆叠上下文中的位置由堆叠顺序确定。

根据color module：

如果不透明度小于 1 的元素未定位，则在其父堆叠上下文中将其绘制在同一层上，作为堆叠级别为 0 的定位元素。

这基本上意味着具有opacity < 1 的static 元素将与具有默认z-index: auto 的定位元素位于同一堆栈级别（当它们共享相同的父堆栈上下文时）。

当元素位于同一堆栈级别时，堆栈顺序由渲染树决定（也就是 html 中的元素顺序）。在这种情况下，由于在 html 树中td 在th 之后，td 将被绘制在th 前面。

查看What No One Told You About Z-Index 上的示例。