Z-Index und Relative/Absolute Positionierung

Ich habe einige Probleme mit z-index und Positionierung. Im Grunde, wenn Sie den Mauszeiger über die Menüpunkte (home, über, etc), malen Sie Spritzer laden sollte unter dem Menü:

http://www.saradouglas.net/home

Stylesheet befindet sich hier.

Dies funktionierte gut, wenn jeder splash div wurde auf die absolute Positionierung, aber ich habe erkannt, daß diese erscheinen würden an verschiedenen Orten in verschiedenen Bildschirm-Auflösungen. Ich dachte es wäre nur ein Fall von Veränderung dieser relativen Positionierung, und dann durch anpassen der Koordinaten entsprechend. Leider ist jetzt meine Spritzer nicht angezeigt werden unter dem Menü, wie Sie sollten.

Zu klären, will ich die Spritzer zu erscheinen unter der Menü - also das Menü sollte immer im Vordergrund angezeigt wird der Spritzer. Dies hat nur zu einem problem werden, da diese Einstellung das Menü, um relative, und diese Spritzer zu absolut.

Ich hoffe, dies ist einfach zu beheben und ich bin einfach etwas fehlt. Ich hoffe jemand hier kann mir sagen, wo ich schief gegangen und eine Lösung anbieten!

Gab es einige gute Antworten eingereicht, bisher aber leider haben Sie nicht behoben ist mein problem. Ich habe versucht, indem Sie das Menü hintergrund auf die ul-Klasse eher als das div, aber das hat keinen Unterschied gemacht, um das problem.

Welche stylesheets sind die paint Spritzer?
saradouglas.net/wp-content/themes/sara-douglas-theme/style.css
Dies ist nicht die Antwort auf deine Frage, aber ein Allgemeines feedback. Ich würde empfehlen zum laden der hintergrund dieser spans auf einmal... jetzt, nachdem ein Benutzer mit der Maus über einen Menüpunkt Ihr browser macht eine Anfrage für das Bild... einfach die background Eigenschaft spans nicht a:hover span... damit alle Bilder werden geladen, auf einmal.
Vielen Dank - ich war in der Planung laden Sie alle auf einmal, aber wollte diese Figur Teil aus dem ersten. Vielen Dank für das feedback, obwohl, geschätzt!

InformationsquelleAutor rossautomatica | 2012-04-25

  1. 13

    Wenn ich mich Recht erinnere die Rangfolge der z-Indizes ist es, so etwas wie dieses:

    • Leinwand (bei der das element gezeichnet /Eltern drawable-Bereich)
    • bg Bilder
    • z-index: -1
    • Standard (0)
    • z-index: 1+

    Geben, wenn Sie jedes Kind-element einen z-index -1, es wird nicht gehen, unter der die übergeordnete hintergrund, weil die Eltern Vorrang.

    Hier ist Ihre Lösung (habe gerade versucht über firebug und es funktioniert):

    1. Entfernen Sie das bg-image aus #menu und fügen Sie einen separaten div unter der ul.menu vor der li's.
    2. Geben die css-weiter unten auf dieser div.
    3. Geben Sie nun alle diejenigen, die Pinselstriche, die eine z-index kleiner als -1. -2 arbeitet.

    - Und das sollte es gewesen sein.

    CSS:

    position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background: url(...);

    Ich weiß, es ist nicht so viel semantische, aber, hey, es funktioniert, richtig? 😛

    Hi - vielen Dank für deine Antwort und vor allem danke dafür, dass so gründlich. Leider bin ich immer noch mit dem gleichen z-index problem! Würden Sie so freundlich sein, zu überprüfen, ob vieleicht habe ich etwas verpasst?
    Ja, fügen Sie das #Menü-separator im inneren der ul, nicht weiter, um es als ein Geschwisterchen. #Menü-separator sollte ein Kind von der ul.
    Perfekt. Ich habe gerade brauchen, um einige Arbeit zu tun auf der ul-nun, um es so Aussehen, wie es war, aber das ist meine Frage beantwortet.. danke!!!!
    froh, dass ich helfen kann. Habt einen schönen Tag! Übrigens bemerkte ich, dass Sie eine Menge Bilder drin. Ich denke, es wäre klug, um die Verwendung von css-sprites. Überprüfen Sie heraus meine Antwort hier für weitere Informationen, wenn Sie nicht vertraut sind, um das Thema stackoverflow.com/questions/10119461/...

    InformationsquelleAutor Ege

  2. 1

    Sollten Sie die position in Ihrem Menü div, dann fügen Sie die absolute Positionierung der divs im Menü div. dann die verschiedenen Bildschirm-Auflösungen ist es kein problem.

    Das beantwortet meine Positionierung problem, aber jetzt die Spritzer werden über das Menü...
    Es ist genau das gleiche 🙂
    Vielen Dank für deine Hilfe - aber die Spritzer sind, die auf der Oberseite des Menüs, sollten aber unter dem Menü. Wissen Sie, wie kann ich dieses Problem beheben?
    Sie können es mit oben, rechts, Links und unten-Attribute im css.
    Ich habe mir auf deinen code und ich habe noch andere Idee. Sie können versuchen, um die Positionierung Ihrer Menü, ohne die Höhe des li. Und dann in css verwenden li:hover{ background-image: url(your url); background-repeat: no-repeat} weißt du, was ich meine? Es ist die bessere Lösung 🙂

    InformationsquelleAutor Mateusz Rogulski

  3. 0

    Können Sie es tun, indem Sie einfach die Einstellung bg, Polstern und der Höhe, auf der ul statt <div id="menu">

    Hi Simon, danke für deine Antwort. Das habe ich versucht - ich habe die bg, Polstern & height auf die 'menu' - ul statt div, aber es gab mir genau die gleichen Ergebnisse, die ich derzeit habe. Ich habe jetzt wieder zu meinem ursprünglichen code, so bin ich leider nicht weiter nach vorne. Vielleicht habe ich deine Antwort missverstanden?

    InformationsquelleAutor simoncereska

Schreibe einen Kommentar