我尝试创建一个模态，但我坚持完成覆盖层。
DEMO http://jsfiddle.net/4z3fss9t/
.modal-wrap{
display: block;
opacity: 1;
position: absolute;
top: 20%;
padding: 0 40px;
left: 0;
border: none;
right: 0;
z-index: 9999;
}
.modal-content{
background-color: white;
padding: 10px;
}
.modal-overlay{
position: fixed;
background: black;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0.5;
}
<div class="modal-wrap">
<div class="modal-content"> Content goes here </div>
<div class="modal-overlay"></div>
</div>
我希望绝对的位置会出现在z-index的前面，但它只是没有，任何想法？
答案 0 :(得分：3)
老实说，CSS中z-index背后的整个想法让大多数网页设计师感到困惑。它不是火箭科学，但你会通过理解实际发生的核心概念来帮助自己。然后，你正在与之斗争的奇怪行为，似乎不像伏都教。
首先，非positioned元素不受z-index的影响。这是你的第一个问题，因为（正如Abdul在他的回答中所指出的）你的模态内容在CSS中没有position指令。
z-index指令以下是excellent article Philip Walton的摘录：
堆叠订单
Z-index看起来如此简单：具有较高z-index的元素堆叠在具有较低z-index的元素前面，对吧？嗯，实际上，没有。这是z-index问题的一部分。看起来很简单，所以大多数开发人员都没有花时间阅读规则。
HTML文档中的每个元素都可以位于文档中每个其他元素的前面或后面。这称为堆叠顺序。规范中明确规定了确定此顺序的规则，但正如我已经说过的那样，大多数开发人员并未完全理解这些规则。
当不涉及z-index和position属性时，规则非常简单：基本上，堆叠顺序与HTML中的外观顺序相同。 （好吧，它实际上比这复杂一点，但只要你没有使用负边距重叠内联元素，你可能不会遇到边缘情况。）
当您将position属性引入混合时，任何定位元素（及其子元素）都会显示在任何未定位元素的前面。（要说元素是“定位”意味着它有一个静态的位置值，例如，相对，绝对等。）
最后，当涉及z-index时，事情变得有点棘手。首先，假设具有较高z-index值的元素位于具有较低z-index值的元素前面是自然的，并且具有z-index的任何元素都位于没有z-index的任何元素之前，但它并不是那么简单。首先，z-index仅适用于定位元素。如果尝试在没有指定位置的元素上设置z-index，它将不执行任何操作。其次，z-index值可以创建堆叠上下文，现在突然看起来很简单，只是变得更加复杂。
最后，如果您真的想深入了解，Mozilla Developers Network
上有一些关于z-index的非常好的资源
答案 1 :(得分：1)
具有position absolute的内容即使您为其指定z-index，也不会“自动”在任何内容前面。如果希望z-index生效，则需要为要控制其“深度”的所有内容定义z-index。
在您的情况下，在.modal-overlay上执行以下操作：
.modal-overlay {
//your code..
z-index: 1;
}
这样，您的.modal-wrap只需要z-index为2：
.modal-wrap {
//your code..
z-index: 2;
}
在看完你的小提琴之后，我发现你的模态内容不是绝对位置或固定位置，并且你没有z-index，这意味着它将位于你的模态覆盖层之下。
您需要定义z-index并将其定位为绝对位置或固定位置，以使其显示在叠加层顶部
.modal-content {
position: fixed; //or absolute
z-index: 2;
}