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：

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

但是，没有任何变化，表格保持在叠加层“下方”。同时，body设置为position: relative;。我尝试使用position，background，z-index，但没有运气。我的overlay或table是否有问题？谢谢

Answer 1

看起来具有css的类与js添加的类不同。如果您使用

，它是否有效

桌面{position：fixed;的z-index：9999; }

Answer 2

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

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

应该是

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

https://jsfiddle.net/5caeLcn0/

如何在叠加层顶部显示元素？

2 个答案: