Question

我有问题。在Firefox中-带有位置的伪元素：固定在标记按钮中，无法覆盖该按钮。

示例

<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而言，该元素与视口相关，并与之相关，而与父元素无关。

该元素从常规文档流中删除，并且在页面布局中没有为该元素创建空间。它相对于由视口建立的初始包含块定位，除非其祖先之一的transform，perspective或filter属性设置为除其他属性外（参见CSS Transforms Spec），在这种情况下，祖先的行为与包含块。（请注意，浏览器与透视图和过滤器不一致，导致包含块的形成。）其最终位置由top，right，bottom和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>

具有位置的伪元素：修复了在Firefox中的标签<button>中不起作用的问题

1 个答案: