绝对定位叠加忽略 z-index

Question

我有以下模板，我正在尝试使用它，我冒昧地为每个 div 添加不同的颜色背景以进行调试，基本上我有三个具有不同背景的 div，并且这些背景需要在中心发光。为此，我尝试设置一个不透明度为 10% 的绝对定位容器。但是它会覆盖所有内容并忽略 z-index。

我知道我错过了一些简单的东西，但我已经关注这个太久了。

http://fwuse.com/n/ 没有发光，颜色不是用于调试的设计。 http://fwuse.com/n/glow.html 添加了 Glow 容器，仅保留菜单出来，其他一切都被隐藏了。 http://fwuse.com/n/glow-opacity.html 不透明的发光容器，请注意没有任何链接可以单击。

Answer 1

为什么不直接使用 CSS 来实现发光效果呢？

#radial-center {
  /* fallback */
  background-color: #2F2727;
  background-position: center center;
  background-repeat: no-repeat;

  /* Safari 4-5, Chrome 1-9 */
  /* Can't specify a percentage size? Laaaaaame. */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);

  /* Firefox 3.6+ */ 
  background: -moz-radial-gradient(circle, #1a82f7, #2F2727);

  /* IE 10 */ 
  background: -ms-radial-gradient(circle, #1a82f7, #2F2727);

  /* IE < 8 Linear gradient fallback */
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a82f7, endColorstr=#2F2727, GradientType=1)";

  /* IE 8/9 Linear gradient fallback */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a82f7, endColorstr=#2F2727, GradientType=1)";
  /* Opera cannot do radial gradients yet */

}

演示：http://jsfiddle.net/AlienWebguy/49d5g/

Answer 2

如果您可以使内容 div 没有背景颜色（背景：透明？）并具有 z-index 3，并且底层的“10% 不透明度”div 具有 z-index 2，那么它将起作用。我不确定background:transparent是否是CSS中的一个属性;)

Answer 3

#content-bg 的 z-index 低于覆盖整个页面的辉光，因此消耗了内容的所有点击。将 #content-bg 的 z-index 更改为 3 似乎可以将其置于足够靠前的位置，以便可以单击，同时不会影响发光效果。

Answer 4

我修复了它，我必须设置 #pagecontainer z-index 并将背景 div 设置为 z-index:auto。我将页眉设置为 z-index: 501，内容设置为 z-index: 502，页脚设置为 z-index: 503，#glow 设置为 z-index: 1。

尽管这很令人困惑，但它有效，知道为什么吗？

http://fwuse.com/no/