Twitter Bootstrap:为什么某些州的z-index:2？

Question

我使用twitter bootstrap作为我的移动Web应用程序.某些图层在滑入或滑出视口时与其他图层重叠.当这些层上的z-index起着至关重要的作用时,就是这种情况.

通常情况下,由于使用了z-index: 2bootstrap.css中的以下样式,我的屏幕(完美布局的z顺序)会被抛弃.

.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明确设置它的动机来自哪里.

我明白在设置动机z-index: 1000中.dropdown-menu的实例.但我无法理解为什么:hover,:focus并:active为btn-group > .btn需求说明z-index: 2.

我确定它是否在那里,这是有原因的.我只是忽略了这一点.

附上示例屏幕截图.这是来自当前下一层上的active按钮btn-group.这btn-group有几个其他按钮在当前图层与下面的图层重叠时隐藏.然而,这个活动按钮撕裂了.

Answer 1

它们z-index: 2;在这些元素上使用，因此它出现在 z-index 为 1 或更低的其他对等元素之上，在任何 z-index 或z-index: 3;更大的对等元素之下，并且与任何 z-index 处于同一级别。z-index: 2;