html - 固定位置重叠绝对位置？

Question

我尝试创建一个模态，但我无法完成叠加层。

演示 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> 

我希望 position absolute 会排在 z-index 前面，但事实并非如此，知道吗？

Answer 1

老实说，CSS 中 z-index 背后的整个想法让大多数网页设计师感到困惑。这不是火箭科学，但您可以通过理解实际发生的事情背后的核心概念来帮自己一个忙。那么你与之抗争的奇怪行为就不会像巫术了。

定位元素

首先，非定位元素不受z-index影响。这是您的第一个问题，因为(正如 Abdul 在他的回答中指出的那样)您的模态内容在 CSS 中没有 position 指令。

理解 CSS 的 z-index 指令

这是此 excellent article 的摘录通过 Philip Walton :

Stacking Order

Z-index seems so simple: elements with a higher z-index are stacked in front of elements with a lower z-index, right? Well, actually, no. This is part of the problem with z-index. It appears so simple, so most developers don’t take the time to read the rules.

Every element in an HTML document can be either in front of or behind every other element in the document. This is known as the stacking order. The rules to determine this order are pretty clearly defined in the spec, but as I’ve already stated, they’re not fully understood by most developers.

When the z-index and position properties aren’t involved, the rules are pretty simple: basically, the stacking order is the same as the order of appearance in the HTML. (OK, it’s actually a little more complicated than that, but as long as you’re not using negative margins to overlap inline elements, you probably won’t encounter the edge cases.)

When you introduce the position property into the mix, any positioned elements (and their children) are displayed in front of any non-positioned elements. (To say an element is “positioned” means that it has a position value other than static, e.g., relative, absolute, etc.)

Finally, when z-index is involved, things get a little trickier. At first it’s natural to assume elements with higher z-index values are in front of elements with lower z-index values, and any element with a z-index is in front of any element without a z-index, but it’s not that simple. First of all, z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing. Secondly, z-index values can create stacking contexts, and now suddenly what seemed simple just got a lot more complicated.

结论

最后，如果您真的想深入研究，Mozilla Developers Network 上有一些关于 z-index 的非常棒的资源。

1. > https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
2. > https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index