Question

如何在其他元素的ontop上叠加div元素？
我想使用opacity 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

您必须固定叠加/背景的位置。将顶部/右侧/底部/左侧设置为0，它将自动填满屏幕。 z-index为16777271将确保它位于所有内容之上，因为这是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抓取的，还有其他方法可以集中处理。小提琴不适合生产使用，你应该看看我上面连接的笔。

如何将<div>元素叠加在另一个元素</div>之上

1 个答案: