<分区>
<分区>
我在 <label> 上有一个伪类标记以在选中选项时显示选中。它通过定位做了所有这些疯狂的事情，将所有伪元素扔到顶 Angular ，甚至显示两个相同的 ::after。元素悬停。
我终于弄明白我有 filter: brightness(.9)在 :hover , 但没有 filter: brightness在基地 <label> CSS。一旦我添加了 filter: brightness(1)到基本元素，问题就消失了。
Here is a fiddle .首先，将鼠标悬停在右上角的支票和蓝色按钮上以查看问题。然后取消注释 filter: brightness(1)行以查看修复。我把它弄得有点难看，这样问题就很容易被发现了。
但现在我只能抓耳挠腮了。发生了什么事？似乎没有 filter然后，CSS 忘记了哪个元素是父元素，只是引用了最后一个非静态定位元素。为什么会这样？还有其他类似的情况吗？
最佳答案
原来的问题是你的label不见了
position:relative；
所以箭头在顶部，因为它是绝对的，不包含在按钮中。
当您向其添加过滤器时，该元素将更改为一个包含 block (这就是过滤器的作用)，因此它具有 position: relative 的效果，这就是一切看起来正常的原因。
在你的 fiddle 中，当你悬停时，它会应用过滤器，这反过来会将元素更改为一个包含 block (基本上是相对位置)一旦发生这种情况，复选标记就会返回到按钮中的正确位置，但现在它不是不再徘徊并返回右上角。只要您悬停，就会重复这种情况，因此这就是它闪烁的原因
关于css - 将 `filter: brightness()` 与伪元素一起使用会破坏绝对定位？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54133889/