2010-04-16 6 views
9

Ich arbeite an einer ziemlich großen Site und habe Probleme beim Verwalten von Z-Indizes. Gibt es ein Firefox-Add-on, das eine Seite betrachtet und mir eine geordnete Liste jedes Elements mit einem angegebenen Z-Index gibt? Das würde eine Menge Zeit für die Fälle sparen, in denen ein Z-Index falsch oder schwer zu finden war.Firefox-Add-on zum Untersuchen von Z-Indizes

+0

ich dieses sehr nützlich gefunden: http://www.erichynds.com/jquery/visualizing-your-z-index-stacks-with-jquery/ – camcam

Antwort

19

Sie finden es hier

https://addons.mozilla.org/en-US/firefox/addon/60

Wenn Sie das Web Developer Extension installiert haben, wählen Sie aus der Speisekarte

Information > Display Topographic information 
+0

Wie untersuche ich eine Liste von Elementen mit Z-Indizes mit Web Developer? – hekevintran

+1

Normalerweise gibt es eine Webentwickler-Werkzeugleiste, klicken Sie auf Information und dann auf Elementinformationen, ein kleines rotes Kästchen wird um das Element herum angezeigt, klicken Sie darauf und ein kleines gelbes Kästchen erscheint in der oberen linken Ecke mit allen Attributen dieses Elements trägt. Tastenkombination Strg + Umschalt + F. – Kyle

+6

ALSO, in der gleichen Information dorpdown, klicken Sie auf "Display stack levels". – Kyle

2

Ich würde vorschlagen, dass Sie Firebug http://getfirebug.com/ Sie können Sie prüfen, ganze Dom einschließlich Z-Indizes.

ein wenig Javascript, verwenden Sie alle Elemente mit Z-Indizes finden helfen: 1. Last jquery 2. Einsatz dieses javascript:

<script type="text/javascript"> 
//replacethis by the elemets that could have a z index ('div, span, etc..') 
$('replacethis').each(function(){ 
if ($(this).css('z-index')) { 
    var zindex = $(this).css('z-index') 
    if (window.console) { 
    console.log($(this), zindex) 
    }else{ 
    $(this).css('border', '1px solid red').prepend('<strong>' + zindex +'</strong>') 
    } 
}; 

}); 
</script> 

, wenn Ihr die Firebug-Konsole nicht geladen wird es eine geben rote Grenze zu allen Elementen mit einem Z-Index und perpend den Z-Index-Wert auf das Feld.

+0

Ich benutze FireBug, aber es hat keine Ansicht, die nur Elemente zeigt, die z- erklärt haben Indizes richtig? – hekevintran

+0

das ist richtig ja, aber durch Klicken auf das Element können Sie sehen, ob es einen Z-Index gibt oder nicht. Verwenden Sie Firebug und verwenden Sie ein kleines Javascript, das Ihnen hilft, alle Elemente mit z-Indizes zu finden: 1. laden Sie jquery 2.Fügen Sie dieses javascript: stellen Sie sicher, Ihre Firebug-Konsole ist auf – meo

0

Sehr alte Frage an dieser Stelle, aber falls jemand auf diese Weise kommt, gibt es immer noch (huh, 'immer noch' ... nicht sicher, ob es existierte, als die Frage ursprünglich gestellt wurde oder nicht) Firefox hinzufügen - "Tilt 3D" genannt, das eine 3D-Ansicht einer Webseite bietet und hervorragend zur Diagnose von Z-Index-Problemen geeignet ist.

https://addons.mozilla.org/en-US/firefox/addon/tilt/

Firefox hatte sogar die gleiche Funktion in einer Art Vorschau Form für einige Versionen eingebettet aber später entfernt. Das obige Add-On wurde seit 2011 nicht aktualisiert, funktioniert aber vorerst noch. Gesundheit Warnung obwohl: Multi-Prozess-Unterstützung in Firefox wird schrittweise mit aufeinander folgenden Firefox-Versionen zum Leben erweckt, und dieses Add-on funktioniert nicht mit Multi-Prozess (auch als Electrolysis oder nur "e10s") Unterstützung aktiviert. Weitere Informationen hier:

https://wiki.mozilla.org/Electrolysis