Question

我正在创建一个系统来引导用户浏览网站。为了避免错误并保持用户的注意力，我希望使页面上的所有内容变暗，而不是我希望它们与之交互。我也想这样做（不是在弹出窗口中）。

我接近这个的方法是将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

然后我将要突出显示的元素的z-index /灯箱设置为高于附加的div。在这种情况下，我将其设置为1001。对于我的主要用例，我想强调form。这样做的问题是只有单独的复选框和其他字段变得无法识别和可点击。包含表格的盒子仍然是黑暗的。有什么方法可以让整个元素包括背景变得突出显示？

Answer 1

如果没有看到您的HTML，很难准确，但这听起来像是z-index问题。

z-index仅适用于position，absolute或relative fixed的元素。默认值为static。

尝试明确将“非工作”元素的定位设置为relative。

用于网页部分的灯箱

1 个答案: