覆盖嵌套的z-index

Question

我有一个叠加层应该在所有东西之上。问题是叠加层位于定义了z-index的内容包装器中。这不能改变。徽标也定义了z-index。这也是无法改变的。

I've made a Fiddle which shows the issue。这可以用纯CSS完成吗？我的另一个想法是使用Javascript移动叠加层，但是所有的CSS当前也是嵌套的，所以如果我这样做，我需要更改大量的CSS。

Answer 1

做这样的事情，当你在'btn'上click将某个类切换为'.overlay'时，就像这样\

 $("button").on("click", function() {
    $(".overlay").toggle();
   $('.content').toggleClass('z-1000');
});

你的CSS中的

：

.content.z-1000{
  z-index:1000;
}

希望这对你有用。工作fiddle