Twitter Bootstrap: Warum der Z-Index: 2 für einige Staaten?

Question

Ich verwende Twitter Bootstrap für meine mobile Webanwendung. Es gibt bestimmte Ebenen, die andere überlagern, wenn sie in das Ansichtsfenster hinein- oder herausgleiten. Dies sind die Situationen, in denen der Z-Index auf diesen Ebenen eine entscheidende Rolle spielt.

Oft meine Bildschirme, mit perfekt z-Aufträge angelegt, werden aus geworfen, um wegen der Verwendung von z-index: 2, zum Beispiel in der folgenden Art von 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; 
} 

Ich weiß, ich könnte sie in meinen eigenen Stylesheets überschreiben, aber ich beginne mich zu fragen, woher die Motivation zum Setzen der z-index explizit kommt.

Ich verstehe die Motivation in der Einstellung z-index: 1000 in .dropdown-menu zum Beispiel. Aber ich verstehe nicht, warum :hover, :focus & :active Zustand für btn-group > .btn braucht z-index: 2.

Ich bin sicher, wenn es da ist, ist es aus einem bestimmten Grund da. Ich vermisse nur den Punkt.

Ein Beispiel Screenshot ist beigefügt. Dies ist von einer active Schaltfläche in einer btn-group auf einer Schicht unterhalb der aktuellen. Diese btn-group hat mehrere andere Tasten, die ausgeblendet werden, wenn die aktuelle Ebene die darunterliegende überlappt. Dieser aktive Button bricht jedoch durch.

Answer 1

Sie verwenden z-index: 2; auf jene Elemente, so dass es auf der Oberseite der anderen Peer-Elemente mit z-Index von 1 oder weniger, unter jedem Peer-Elemente mit z-index: 3; oder mehr, und auf dem gleichen Niveau wie jeder z-index: 2; erscheint