如何在 HTML5/CSS3 中创建一个推子并将任意元素放在前面（以引起注意）？

Question

我有一个网站，我想要一种机制，我可以在 除一个元素之外的所有元素前面创建一个 50% 透明的黑色推子（不，推子可以不包含子元素）以便用户在短时间内专注于该特定元素。

我已经开始创建具有以下属性的推子：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.50);
z-index: 1000;

当我不使用它时，我添加了一个 class 将它的 z-index 设置为 -1 并且它被隐藏了。当我删除 class 时，它再次显示。我什至可以给它添加 CSS 动画。到目前为止一切顺利。

现在，假设我有一个独立于此推子 div 的元素，我想将其置于最前面。

我添加了 z-index: 1001 但没有任何反应。然后，我了解到我需要为 z-index 工作的元素添加相对或绝对定位。我已经添加了 position: relative 但它仍然不起作用。我确定其他东西不会覆盖 z-index 或定位属性。我确认我的推子具有 computed 绝对定位和 1000 的 z 索引，并且目标对象具有 computed 相对定位和 1001 的 z 索引.但它的目标仍然隐藏在推子后面

为什么？

（我看过其他关于类似问题的问题，但我还没有在其中任何一个中找到这种情况的答案。他们中的大多数人告诉我使用定位来使 z 索引工作，我已经在做.)

Answer 1

z-index 仅影响放置在 static 以外的元素（因此，absolute、relative 或 static）。

如果没有z-index则指定文档的流向堆叠。在此演示中，第二个 div 堆叠在第一个之上（自然流）。

div {
  position: absolute;
  top: 0; left: 0;
  width: 100px;
  height: 100px;
}
#one {
  background: blue;
}
#two {
  top: 30px; left: 30px;
  background: red; 
}

<div id="one"></div>
<div id="two"></div>

如果我们想改变它，我们需要定义一个 z-index:

div {
  position: absolute;
  top: 0; left: 0;
  width: 100px;
  height: 100px;
}
#one {
  background: blue;
  z-index: 1;
}
#two {
  top: 30px; left: 30px;
  background: red; 
}

<div id="one"></div>
<div id="two"></div>

但你已经得到了那个部分。

棘手的部分是当您对 parent 和 child 元素使用绝对或相对位置时。关键是 z-index 或 child 永远不能大于它的 parent.。

在下面的代码中 #one 是 #parent 的 child。

#parent 的 z-index 为 10
#one 的 z-index 为 30
#two 的 z-index 为 20

因此，您可能希望顺序（从后到上）为

#parent > #two > #one
但由于 #one 的 z-index 不能比 parent 大，所以它将是
#parent > #one > #two

#parent {
  position: relative;
  width: 120px;
  height: 120px;
  background: yellow;
  top: 0; left: 0;
  z-index: 10
}
#one {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0; left: 0;
  background: blue;
  z-index: 30;
}
#two {
  position: absolute;
  top: 40px; left: 40px;
  width: 100px;
  height: 100px;
  background: red;
  z-index: 20;
}

<div id="parent">
  <div id="one"></div>
</div>
<div id="two"></div>

Answer 2

使两个元素都处于绝对位置（位置：绝对；）它应该解决这个问题。例如：

.red, .green, .blue {
  position: absolute;
}
.red {
  background: red;
  z-index: 1000;
  width : 50px;
  height : 50px;
}
.green {
  z-index: 1001;
  background: green;
  width : 50px;
  height : 50px;
}
.blue {
  z-index: 1002;
  background: blue;
  width : 50px;
  height : 50px;
}

<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

如何在 HTML5/CSS3 中创建一个推子并将任意元素放在前面（以引起注意）？

How to create a fader and bring an arbitrary element in front (to draw attention) in HTML5/CSS3?

html

css

z-index

css-position