• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit Z-Index

C

cosan

Neues Mitglied
Hallo Allerseits...

Ich baue eine kleine Webseite nur so zum Testen und meine Html und CSS Kentnisse ein wenig aufzufrischen :)

Habe folgendes Problem

Ich habe einen DIV in dem ich ein anderes DIV habe. Das erste DIV ist mit Background mit einem Bild versehen. Das erste DIV 16x16pix (das zweite übrigens auch) groß ist und in der mitte ca. 13x13pix transparent ist.
Dem zweiten DIV soll ein background, in diesem Falle einfach eine Farbe z.B. black gesetzt werden, wenn ich über den zweiten DIV mit der Maus rüber gehe. Das klappt auch alles wunderbar. Das Problem ist, dass der Zweite div, das Bild was im ersten DIV als Background gesetzt ist, überfüllt. Ich habe dem ersten Bild per CSS z-Index:1; gesetzt und dem zweiten Bild z-index:2; gesetzt und trotzdem das gleiche. Kann mir jemand auf die Sprünge helfen was ich falsch mache?

beispiel.jpg

Dieses Beispiel zeigt wie aussehen muss. Der obere Beispiel ist der Jetzige Fall. Der untere Fall ist mein Ziel....

Ich Bedanke mich schon mal für jegliche Hilfe die mir entgegen kommt :) (Irgendwie bin ich wohl voll der newbie geworden in HTML :()


Der Code dazu:
Code: 
HTML:
<div class="firstItem">
   <div class="secondItem"></div>
</div>

CSS:
.firstItem{
    background-image: url("../Images/firstBackground.png");
    height: 16px;
    width: 16px;
    z-index:2;
}

.secondItem{
    background:orange;
    height: 16px;
    width: 16px;
    z-index:1;
}
 
Zuletzt bearbeitet:
Wenn du zwei Divs mit derselben Größe übereinander legst und dem zweiten eine background-color zuweist, dann überdeckt es natürlich das erste. Dein z-index macht hier auch nichts anderes als die vorgegebene Reihenfolge zu bestätigen.
 
der zweite ist z-index 1, der erste ist index 2. der erste muss also vorne stehen... bringt aber nichts :(
 
Zuletzt bearbeitet:
Wenn ich mich nicht irre, hängt z-index immer mit position zusammen? Probier doch mal, den beiden einfach einen position-Wert zuzuweisen, vielleicht greift dann der z-index...
 
OK. Ich habe es so probiert und klappt, jedoch umständlich ist es.
So die Lösung:


Code: 
HTML:
<div id="myItems">
       <div class="secondItem"></div>    
       <div class="firstItem"></div>
</div>  


CSS:

.secondItem{    
        background:orange;     
        height: 16px;     
        width: 16px;
        position: relative;top: 0px; left: 0px;
        float:left; 
}

.firstItem{     
        background-image: url("../Images/firstBackground.png");     
        height: 16px;     
        width: 16px;     
        position: relative;top: 0px; left: -16px;
        float:left; 
}

Jetzt ist die Frage: Dem ersten Item muss extra left:-16px; gesetzt weden, den ansonsten wird der erste Item direkt nach dem zweiten gepackt. Das ist das was ich umständlich finde. Kann man das nicht irgendwie umgehen?

WEnn ich ja mit ABSOLUTE position arbeite, dann orientiert sich die Angabe von Position an dem Bildschirm und nicht dem Übergeordnetem Objekt (in disem Falle dem übergeordnetem DIV mit der ID=myItems)...
 
Zuletzt bearbeitet:
Absolut positionierte Elemente orientieren sich an dem nächsten relativ oder fixiert positionierten Element, welches im DOM oberhalb von ihnen liegt. Wenn Du #myItems z.B. noch

Code: 
position: relative;

gibst, dann würden sich die absolut positionierten Elemente darin nach diesem ausrichten. Wenn es kein solches Element gibt, orientieren sie sich am <body>-Element.

Da Du 2 Elemente übereinander legen willst, musst Du auch mit left oder top oder was auch immer zusammen mit absolute oder relativer Positionierung arbeiten.
 
Hay Danke :) das klappt wunderbar :) nur ist es komisch. Wenn ich beim Absoluten Layout Top:0px; eingebe. So erscheint das Objekt ganz unten. Beim bottom:0px; erscheint das Objekt ganz oben. Ist es normal oder verstehe ich nicht die Logik?
 
top heißt "ausgehend von oben", bottom heißt "ausgehend von unten". Da Du nur mit kleinen Objekten arbeitest sieht es nur aus als wäre das Element bei bottom von 0px oben. Es liegt aber eigentlich auf der unteren Kante des relativ positionierten Objektes. Bei top ist es die obere Kante.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben