Popover在其他组件下出现毛刺

时间:2020-04-07 08:30:10

标签: css reactjs popover

由于某些原因,即使我使用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

0 个答案:

没有答案