用z-index和position解释这种模态行为？

Question

I actually solved this issue for myself but was wondering if anyone could explain why my fix works. I was styling a popup modal on a mobile site using the MoovWeb SDK and sass. The modal consists of a mask div, which is located immediately inside a container div, and the modal div itself, which was buried more deeply in the DOM.

mask styling:

#modalMask{
  opacity: .8;
  position: absolute;
  display:none;
  height:100%;
  width: 100%;
  z-index:9990;
}

modal styling:

.mw-popup-modal { 
  top: 80px !important;
  left: 0 !important;
  position:fixed;
  z-index:9999;
  display:none;
}

This resulted in the mask sitting on top of the modal and the buttons inside the modal being un-tappable - their tap area was actually located around 3cm below where the button was appearing onscreen on the phone. However, on the desktop version of the site, this styling looked fine.

When I changed the positioning of the modal from "fixed" to "absolute" this fixed the problem, but I'd like to understand why. Do fixed- and absolute-positioned elements each work on their own z-index stack?

Answer 1

Official W3 documentation states

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images.

Absolute and Fixed positioning do not work on their own z-index stack context.