请考虑这个HTML+CSS:
#testArea {
box-sizing: border-box;
width: 300px;
height: 300px;
background-color: blue;
padding: 20px;
color: white;
font-weight: bold;
font-size: 18px;
}
#testArea:hover {
-webkit-filter: brightness(50%);
}
#absElement {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: green;
}<div id="absElement"></div>
<div id="testArea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>如果将鼠标移到蓝色区域上，:hover CSS样式生效，并应用50%亮度过滤器.不知怎的，绝对定位的绿色absElement消失了.我原以为testArea元素本身的渲染会被改变，但似乎有一种覆盖元素是在宿主元素上动态渲染的.
如果我在#absElement样式定义中添加z-index: 1，那么行为将符合我的预期.另一种"修复"它的方法是，将absElement div移到testArea div之后.但奇怪的是，我应该这样做，因为绝对定位的元素总是应该呈现在流布局元素之上.
这是怎么回事？我知道我可以添加z-index属性，然后继续，但我想了解如何应用/渲染过滤效果.