我在画布外覆盖了内容。现在，我需要从溢出的内容中选择一些元素，并使它们出现在叠加层上方（忽略叠加层效果）。
除非内容包装器已应用transform规则，否则此方法正常工作。
当我将transform: rotate(0deg);添加到content元素时，z-index中的#exception不再起作用。
注：旋转值是动态的。请不要介意，该规则是必需的。
注释＃2：可以通过某种方式更改标记，但是主要的“ Lorem Ipsum”内容的div必须是#exception的同级元素，同时必须是{{1 }}以及#content规则。
https://codepen.io/cjayyy/pen/ZEEeKGy
transform html
<div id='canvas'>
<div>
<div id='content'>
<div id="exception">X</div>
<div>Lorem Ipsum</div>
</div>
</div>
<div id='overlay'></div>
</div>
<style>
#canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 200px;
background: #FFF;
background-image: url('https://camo.githubusercontent.com/d4d73cc4163f9f4061a21f520a625578a49215c0/68747470733a2f2f73696d706c6569636f6e732e6f72672f69636f6e732f73696d706c6569636f6e732e737667');
background-size: 3px;
}
#overlay::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
outline: 200vw solid rgba(225,225,225, 0.5);
}
#content {
position: absolute;
width: 110px;
margin-left: -100px;
margin-top: -20px;
padding: 50px;
background: green;
font-family: Arial;
font-weight: bold;
transform: rotate(0deg); // problem
}
#exception {
position: absolute;
margin-left: -20px;
z-index: 9;
}
</style>
div中的“ X”应位于叠加效果上方。
仅在#exception不进行转换的情况下，#exception div中的“ X”才高于叠加效果。
我正在寻找针对此问题的任何解决方案/解决方法，而不是为了解释为什么我的方法不起作用。