Псевдоэлемент с позицией: исправлено неработающее в теге <button> в Firefox
У меня проблема. В Firefox - псевдоэлемент с position: fixed в кнопке тега, не закрывающей эту кнопку.
Пример
<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;
}
Ответы 1
Не используйте position:fixed, используйте position:absolute.
В position:fixed элемент связан и имеет размер область просмотра, а не родительский элемент.
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.
.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>Почему вы используете для этого псевдоэлемент. Непонятно, что вы пытаетесь сделать.
Но в моем случае у меня должен быть псевдоэлемент над всеми блоками (например, фон для всплывающего окна). Поэтому я должен использовать position: fixed.