Ein Element über ein absolut positioniertes Overlay bringen

Wie kann das h2 Element in diesem sandbox über die Überlagerung gebracht werden?Ein Element über ein absolut positioniertes Overlay bringen

<h1>Hello Plunker!</h1> 
<h2>Above the overlay</h2> 
<div class="overlay"></div> 

.overlay { 
    position:absolute; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    background-color: rgba(34, 34, 34, 0.8); 
    z-index:100; 
} 

h2 { 
    z-index:200; 
}

https://plnkr.co/edit/md2lIJCbhnEcc1XAbrne?p=preview

Quelle

2016-08-08 Lewis Diamond

immer den entsprechenden Code in Ihrer Frage, und nicht nur den Link zu Sandbox. –

Sie müssen das absolute Element nicht mit einem Z-Index setzen. Nur die Elemente, die Sie darüber anzeigen möchten. Also würde ein Z-Index auf dem '.overlay' von 1 ausreichen. Mehr Code wäre nett, wie Ori empfohlen wird, so können wir Ihnen helfen, die entsprechende sichtbare Priorität einzustellen – TGEE

... bedeutete, dass Sie keinen Z-Index auf dem Overlay brauchen, da seine Position absolut ist. Nur die Elemente, die Sie über die '.overlay' – TGEE

Ändern der Position des Elements static-relative/absolute/fixed. position: static (Standard) erlaubt es nicht, z-index (demo):

h2 { 
    position: relative; 
    z-index:200; 
}

Quelle

2016-08-08 21:38:24

Ich habe Ihre Antwort akzeptiert, da es für die Frage/Sandbox funktioniert. Leider muss für meine Sandbox etwas Wichtiges fehlen, da ich das schon ausprobiert habe und es in meinem Fall nicht funktioniert. Ich werde eine neue Frage erstellen, sobald ich herausgefunden habe, was anders ist. –

Fügen Sie hier einen Link zur neuen Frage hinzu, wenn Sie das tun. Das ist interessant :) –

Ich habe das Problem tatsächlich behoben. Es war aufgrund eines CSS-Selektors, der einen Z-Index auf ein Far-Elternteil des Knotens anwendete, den ich in den Vordergrund bringen wollte. Css erlaubt einem Kind eines Knotens mit einem niedrigeren Z-Index als seiner Geschwistersprache nicht, über dieser Geschwistersprache "zu sein". Ich musste meine HTML-Hierarchie so neu anordnen, dass der> * {z-index: X; } Selektor würde mein Ergebnis nicht beeinflussen. –

Wenn Sie meinen, dass die h2vor sein sollte, die Overlay-DIV, seine CSS ändern:

h2 { 
    z-index: 200; 
    position: absolute; 
    color: white; 
}

(ich habe die weiße Farbe, um es klarer, dass es nicht hinter overlay)

Quelle

2016-08-08 23:02:51 Johannes

Ein Element über ein absolut positioniertes Overlay bringen

Antwort

Verwandte Themen