javascript - 如何将 元素放在另一个元素之上

Question

如何将 div 元素叠加在其他元素之上？
我想使用不透明 css 选项制作一个稍微半透明的 div 元素，然后放置网页顶部的 div 使其变暗，然后在其上放置另一个带有表单的 div。我尝试使用 z-index，但无法很好地工作。我该怎么做？有一个更好的方法吗？这是代码，我做错了什么吗？

 <div style="opacity:.3; width:200; height:200; background-color:#222021; position:relative; z-index:1000;"></div>
<div style="z-index:100;">
    <form name="testform" >
    <input type="text"  placeholder="First Name"required/><br>
    <input type="text"  placeholder="Last Name" required/><br>
    <input id="submit" type="submit"  value="Submit" />
    </form> </div>

我希望 div 位于其他元素之上。(在本例中为表单。)

Answer 1

Fiddle

您必须固定叠加层/背景。 top/right/bottom/left 设置为 0 时，它会自动填满屏幕。 16777271 的 z-index 将确保它位于所有内容之上，因为这是 cross-browser highest z-index。 .您也可以将其设置为 999 或其他值，我猜会起到同样的作用。

.overlay {
    z-index: 16777271;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}

绝对居中法是从this pen抓取的, 还有其他方法可以使某些东西居中。 fiddle 不用于生产，您应该查看我上面链接的笔。