由于某些原因,即使我使用z-index,弹出窗口也始终位于第二个可折叠的卡片文本后面。有人建议有一个称为“堆栈上下文”的概念,但是我不确定如何使用或理解它。任何有关如何解决此问题的建议将不胜感激。
tsx:
return (
<div className={bem('delayInformation')}>
<div className={bem('td', 'delayCode')}>
{code}
<ArrowPopover
anchor={
<ClickableIcon
ariaLabel={`Delay info (${code})`}
onClick={toggleDelayInfoArrowPopover}
>
<Info />
</ClickableIcon>
}
open={isOpen}
offsetX={-10}
onOutsideAction={toggleDelayInfoArrowPopover}
>
<div className={bem('delayDescription')}> // this is the popOver
<Label>{code}</Label>
{description}
</div>
</ArrowPopover>
</div>
<div className={bem('td')}>{addMinsPostfix(time)}</div>
<div className={bem('td')}>{owner}</div>
</div>
);
};
CSS:
&__delayInformation {
display: flex;
align-items: center;
width: 100%;
}
&__delayDescription {
width: 250px;
@include space(padding, lg);
}
输出:output