为什么 Bulma CSS 框架会在悬停时更改 z-index？

Question

我正在研究我的网站的渲染性能问题，我发现只需移动鼠标指针就可以得到很多重画。

示例：每次我在此页面中的输入和按钮之间移动鼠标指针（仅悬停）时，输入字段和按钮下方的 HTML 框都会重新绘制（来自官方 Bulma 文档）

我正在使用 Bulma CSS 框架，并在某些元素上进行“附加”排列。更深入的分析表明，此类按钮和输入的 z-index 在悬停时发生变化。 Bulma中相关的scss代码是这样的：

来自tools.scss：

  .#{iv.$class-prefix}button,
  .#{iv.$class-prefix}input,
  .#{iv.$class-prefix}select select {
    &:not([disabled]) {
      &:hover,
      &.#{iv.$class-prefix}is-hovered {
        z-index: 2;
      }

      &:focus,
      &.#{iv.$class-prefix}is-focused,
      &:active,
      &.#{iv.$class-prefix}is-active {
        z-index: 3;

        &:hover {
          z-index: 4;
        }
      }
    }
  }

悬停时 z 索引变化背后的逻辑是什么？

这导致我相当复杂的网站上进行了大量的重新绘制。其他CSS框架有类似的功能吗？我很想删除/中性这些 z-index 更改。

Answer 1

如果没有 z-index hack，部分前缀按钮边框（焦点）将被输入字段覆盖，如下所示：