Question

我有一个问题，我会尽力描述：我有一个看不见的绝对div。我有一个图标，当悬停时，绝对div是可见的。现在，我想根据图标将绝对div居中。

问题在于中心是图标的绝对div，我需要图标的位置属性为position: relative。这是一个问题，因为图标位于具有overflow: hidden的div中，因此绝对div会被裁剪。

如果我把绝对div放在溢出div之外，我就不能将div放在图标的中心。

这是一个描述问题的屏幕截图： https://i.gyazo.com/2f7144c856bd484cedc7975438fa3e9b.png

div没有裁剪时看起来像这样： https://i.gyazo.com/32ac127fa8c163907a0564fb57ec549e.png

以下是此标记的代码（我省略了不相关的部分）：

<BreakdownIconWrapper
  onMouseEnter={this.toggleBreakdownDisplay}
  onMouseLeave={this.toggleBreakdownDisplay}
>
  <img src={PercentsIcon} alt="Breakdown" />
  <Breakdown
     bottom="37px"
     left="-120px"
     right="-119px"
     visible={showBreakdown}
     breakdown={box.breakdown}
   />
</BreakdownIconWrapper>

这是css：

const BreakdownIconWrapper = styled.span`
  position: relative;
  margin-left: 11px;
`;

const Breakdown = styled.div`
  position: relative;
  width: max-content;
  margin: auto;
  top: 0;
  right: 0;
  left: 0;
  padding: 10px 7px;
  background: #f3f8fb;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  opacity: ${(props) => props.visible ? '1' : '0'};
  pointer-events: auto;
  cursor: default !important;
  transition: 0.3s;
  box-shadow: 0 1px 9px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;

  &:after {
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    margin: auto;
    content: '';
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f3f8fb;
  }
`;

Breakdown组件是绝对div，BreakdownIconWrapper是包含img图标的div。

所有这一切都在一个隐藏溢出的div中。如何让Breakdown组件忽略溢出并仍然以图标为中心？

溢出父中心绝对div - css

0 个答案: