Javascript 网页部分的就地光盒

我正在创建一个引导用户浏览网站的系统。为了避免错误并保持用户的注意力集中，除了我希望他们与之交互的内容外，我还希望将页面上的所有内容都变暗。我也希望在适当的位置（而不是在弹出窗口中）执行此操作

我实现这一点的方法是将

div

附加到

body

并将其样式设置为：

  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #000;
  opacity: 0.5;
  -ms-filter:'alpha(opacity=50)';
  filter: alpha(opacity=50)
  z-index: 1000

---

然后，我将要高亮显示的元素/lightbox的

z-index

设置为高于附加的

div

。在本例中，我将其设置为

1001

。对于我的主要用例，我想突出显示一个

表单

。问题是，只有单个复选框和其他字段未标记且可单击。装表格的盒子仍然是黑色的。有什么方法可以使整个元素（包括背景）高亮显示吗？

如果不查看HTML，很难做到精确，但对我来说，这听起来像是一个

z-index

问题

仅适用于位置

为
绝对
、
相对
或
固定
的元素。默认值为
静态

尝试显式地将“非工作”元素的位置设置为
relative
，只是好奇，您是否为包含表单的div设置了背景色（我假设为白色）？“不透明性<1”为黑色