css - 如何在叠加层上显示元素？

Question

我正在尝试在叠加层上显示一个表格。叠加 div 具有以下样式:

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

在我的代码中的某个时刻，我执行以下操作:

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

最后一条语句将以下内容添加到我的表:

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

但是，没有任何变化，表格仍然在叠加层“之下”。同时，body 被设置为position: relative;。我尝试使用 position、background、z-index，但没有成功。我的 overlay 或 table 有问题吗？谢谢

Answer 1

只需删除 .addClass 语句中的点，即可在其中添加桌面类。

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

应该是

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

https://jsfiddle.net/5caeLcn0/