Wie wird ein Element über dem Overlay angezeigt?

Question

Ich versuche, eine Tabelle oben auf dem Overlay anzuzeigen. Das Overlay div hat die folgenden Arten:

.overlay { display:none; position:fixed; top:0px; left:0px; width:100%; 
      height:100%; z-index:999; background:rgba(0,0,0,0.8); } 

An einem gewissen Punkt in meinem Code, ich folgendes: Zu meinen table folgende

$("body").append(`<div class="overlay"></div>`) 
$(".overlay").css("display", "block"); 
$("table").addClass(".table-top"); // Supposed to show my table on top of the overlay 

Die letzte Aussage ergänzt:

.table-top { position: fixed; z-index:9999; } 

Nichts ändert sich jedoch, und die Tabelle bleibt "unter" der Überlagerung. Inzwischen ist body auf position: relative; eingestellt. Ich habe versucht, mit position, background, z-index zu spielen, aber hatte kein Glück. Gibt es ein Problem mit meinem overlay oder table? Danke

Answer 1

Entfernen Sie einfach den Punkt in Ihrer .addClass Anweisung, wo Sie die Tischklasse hinzufügen.

$("table").addClass(".table-top"); 

sollte

sein ein funktionierendes Beispiel

$("table").addClass("table-top"); 

https://jsfiddle.net/5caeLcn0/

Answer 2

Es sieht aus wie die Klasse, die die CSS hat, ist anders als was von der JS hinzugefügt wird. Funktioniert es, wenn Sie

verwenden

Tischplatte {Position: fest; Z-Index: 9999; }