html - 推特 Bootstrap : Why the z-index: 2 for some states?

Question

我将 Twitter Bootstrap 用于我的移动 Web 应用程序。当某些图层滑入或滑出视口(viewport)时，某些图层会与其他图层重叠。在这些情况下，这些层上的 z-index 起着至关重要的作用。

通常，由于使用 z-index: 2，我的 z 顺序布局完美的屏幕会乱序，例如 bootstrap.css 中的以下样式:

.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}

我知道我可以在自己的样式表中覆盖它们，但我开始怀疑明确设置 z-index 的动机从何而来。

例如，我理解在 .dropdown-menu 中设置 z-index: 1000 的动机。但我无法理解为什么 :hover, :focus & :active 状态为 btn-group > .btn 需要 z-index: 2。

我敢肯定，如果它在那里，那是有原因的。我只是错过了重点。

附上示例屏幕截图。这是来自当前层下方的 btn-group 中的 active 按钮。此 btn-group 有几个其他按钮，当当前层与下面的层重叠时，这些按钮会隐藏。但是，此事件按钮会撕裂。

Answer 1

他们在这些元素上使用 z-index: 2; 因此它出现在 z-index 为 1 或更小的其他对等元素之上，在任何具有 z-index 的对等元素之下: 3; 或更多，并且与任何 z-index: 2;

处于同一级别