css - 位置为 : fixed not working in tag <button> in Firefox 的伪元素

Question

我有一个问题。在 Firefox 中 - 带有 position: fixed in tag button 的伪元素不覆盖该按钮。

例子

<button class='test'>lalal</button>

.test {
    position: relative;
}
.test::after {
    content: '';
    position: fixed;
    cursor: pointer;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}

https://jsfiddle.net/xt9eLb8z/4/

Answer 1

不要使用 position:fixed 使用 position:absolute。

使用 position:fixed 时，元素与 viewport 而不是父元素相关并根据其大小。

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

^MDN

.test::after {
  content: '';
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.test {
  position: relative;
}

<button class='test'>lalal</button>