Z-Index auf zwei festen Elementen funktioniert nicht

Ich habe zwei feste Container, #meta und #meta-container, wobei #meta immer im Vordergrund sein soll, da es ein globales Steuerelement ist.Z-Index auf zwei festen Elementen funktioniert nicht

Mein Code sieht wie folgt aus

#meta-container { 
 
    position: fixed; 
 
    z-index: 1; 
 
    left: 0; right:0; 
 
    bottom:0; top: 0; 
 
    background-color: red; 
 
    color: rgba(0, 0, 0, 0.87); 
 
} 
 

 
#meta { 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 40%; 
 
    width: 60px; 
 
    height: 25px; 
 
    display: flex; 
 
    background-color: black; 
 
}

<div> 
 
    <span id="meta"> 
 
     <span class="bar"></span> 
 
    <span class="bar"></span> 
 
    <span class="bar"></span> 
 
    <span class="bar"></span> 
 
    <span class="bar"></span> 
 
    </span> 
 
    #meta 
 
</div> 
 
<div id="meta-container" class="slidein"> 
 
    #meta-container 
 
</div>

Aber span#meta nicht oben auf div#meta-container angezeigt wird. Ich habe z-index irgendwo nicht neu zugewiesen. Ich änderte auch die z-index Werte für das Testen, aber es half nicht. Was mache ich falsch?

So lang - glücklich Codierung.

(1) Bearbeiten: Korrigierte Rechtschreibung im Code-Snippet. Snippet funktioniert jetzt (leider nicht mein Code).

Quelle

2017-02-25 randmin

Ihr Code-Snippet, wenn es ausgeführt wird, zeigt zwei Zeilen mit je zwei Punkten - seien Sie vorsichtig, etwas genauer zu sein, was das Problem sein soll? – CBroe

Ich wusste eigentlich nicht, dass ich ein Snippet hinzugefügt habe. Ich wollte einfach Code demonstrieren. Der Vollständigkeit halber werde ich das Snippet jedoch so bearbeiten, dass es sinnvoller ist. – randmin

Gelöst: 'span # meta' wurde in anderen Containern verschachtelt (z. B. das oben erwähnte div). Nachdem ich es "auf die gleiche Ebene" wie "div # span-container" umgearbeitet habe, funktioniert die Positionierung jetzt für mich. Danke an alle für die Hilfe. Dank wscourge für die Frage ein glatter Markup! ;) – randmin

Alles, was Sie tun müssen, top und left Stile fügt sie zu überlagern:

#meta-container { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 

 
#meta { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
}

<div> 
 
    <span id="meta"> 
 
     <span class="bar"></span> 
 
     <span class="bar"></span> 
 
     <span class="bar"></span> 
 
     <span class="bar"></span> 
 
     <span class="bar"></span> 
 
    </span> 
 
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbb 
 
</div> 
 
<div id="meta-container" class="slidein"> 
 
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
 
</div>

Quelle

2017-02-25 12:25:07 wscourge

Es scheint, als ob dein Snippet unter dem gleichen "buggy" Verhalten leidet meins ist: Die Linie von "a" s, die das untere Element sein soll, ist auf der B-Linie gestapelt (sieht zumindest so aus wenn ich einen Teil des Textes auswähle). Danke trotzdem, dass du dir die Zeit genommen hast, zu antworten. Ich habe dem Element #meta einen Wert von 0 gegeben, um deiner Herangehensweise ohne Erfolg zu folgen. – randmin

#meta-container { 
    position: relative; 
    width:100%; 
    height:100%; 
    . . . 
} 

#meta { 
    position: fixed; 
    . . . 
}

<div id="meta"> 
    <span class="bar"></span> 
    <span class="bar"></span> 
    <span class="bar"></span> 
    <span class="bar"></span> 
    <span class="bar"></span> 

    <div id="meta-container" class="slidein"> 
     ... 
    </div> 
</div>

Quelle

2017-02-25 12:35:31 Saeed

randmin: Sie können oben Antwort als Beispiel in jsFiddle sehen: https://jsfiddle.net/vgvcjd87/1/ – Saeed

Ich brauche beide Elemente zu festen Position sein. Ihre Antwort funktioniert gut, wenn eines der Elemente eine relative Position hat. – randmin

#meta{ 
 
    border: 1px solid; 
 
    width: 25%; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 
    
 
#meta-container{ 
 
    border: 1px solid; 
 
    width: 25%; 
 
    color: red; 
 
    position: relative; 
 
}

<div id="meta"> 
 
    <span> 
 
    meta box 
 
    </span> 
 
    
 
</div> 
 

 
<div id="meta-container" class="slidein"> 
 
meta container box 
 
</div>

Quelle

2017-02-25 12:37:17

Vielen Dank für Ihre Antwort. Ihre Lösung zielt auf zwei Elemente der relativen/absoluten Position ab, ich brauche jedoch beide Elemente, um sie zu fixieren. – randmin

Ich bin mir nicht sicher, was genau Sie tatsächlich brauchen.Nutzen Sie unten CSS für oben Beispiel '# Meta-Container { Breite: 100%; Hintergrund: rot; Position: relativ; Höhe: 100px; } #meta { Breite: 25%; Position: fixiert; Z-Index: 1; Höhe: 20px; } ' –

Z-Index auf zwei festen Elementen funktioniert nicht

Antwort

Verwandte Themen