Css SVG的绝对定位会导致内部路径元素移动到其包含元素之外

我有一个简单的collapseiconreact组件，它本质上是两个SVG路径（形成一个箭头），由一个圆形组件包裹

它在我把它放在页面上的任何地方都能完美工作……除非我在布局时选择使用position:absolute。例如，我需要在容器的右上角对齐它。我尝试了

position:absolute

（使用

top:0

和

right:0

），也尝试了

float:right

使用

页边距top:-50px

。在这两种情况下，箭头都迁移到圆边界之外

以下是图标的简化反应代码：

return (
      <Circle  justify="center" alignItems="center"
          onClick={toggleSelect}
          name="collapse"
          {...props}
        >
          <Icon viewBox="0 0 18 10" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
            {...props}
          >
            <g id="Style-Guide" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round">
              <g id="Style-Guide---Elements" transform="translate(-198.000000, -3941.000000)" stroke="#686868" strokeWidth="2">

                <RotateGroup {...props} id="Collapse-Arrow-Small">
                  <Path {...props} d="M0.727272727,7.33333333 L8.03627318,0.633416253" id="Line-2"></Path>
                  <Path {...props} d="M8,7.33333333 L15.3090005,0.633416253" id="Line-2-Copy" transform="translate(11.636364, 4.000000) scale(-1, 1) translate(-11.636364, -4.000000) "></Path>
                </RotateGroup>
              </g>
            </g>
          </Icon>
        </Circle>
    )

const Circle = styled(FlexContainer)`
  width: 32px;
  height: 32px;
  border-radius: 18px;
  border: 2px solid ${colors.primary700};

const Path = styled.path`
  fill: none;
  stroke: ${colors.primary700};
`;

const Icon = styled.svg`
  width: 18px;
  height: 10px;

  &:disabled ${Path} {
    stroke: ${colors.primary300};
  }
`

  <Section flexDirection="column">
    <SectionTitle>My Food Preferences</SectionTitle>
    <Collapsible trigger={<StyledCollapseIcon/>}>
      <FoodPrefsForm />
    </Collapsible>
  </Section>

const StyledCollapseIcon = styled(CollapseIcon)`
  position: absolute;
  top: 0;
  right: 0

  ${'' /* float: right;
  margin-top: -50px; */}
`

返回(
)
const Circle=已设置样式（FlexContainer）`
宽度：32px；
高度：32px；
边界半径：18px；
边框：2px固体${colors.primary700}；
const Path=styled.Path`
填充：无；
笔划：${colors.primary700}；
`;
const Icon=styled.svg`
宽度：18px；
高度：10px；
&：已禁用${Path}{
笔划：${colors.primary300}；
}
`

这就是我试图定位图标的地方：

return (
      <Circle  justify="center" alignItems="center"
          onClick={toggleSelect}
          name="collapse"
          {...props}
        >
          <Icon viewBox="0 0 18 10" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
            {...props}
          >
            <g id="Style-Guide" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round">
              <g id="Style-Guide---Elements" transform="translate(-198.000000, -3941.000000)" stroke="#686868" strokeWidth="2">

                <RotateGroup {...props} id="Collapse-Arrow-Small">
                  <Path {...props} d="M0.727272727,7.33333333 L8.03627318,0.633416253" id="Line-2"></Path>
                  <Path {...props} d="M8,7.33333333 L15.3090005,0.633416253" id="Line-2-Copy" transform="translate(11.636364, 4.000000) scale(-1, 1) translate(-11.636364, -4.000000) "></Path>
                </RotateGroup>
              </g>
            </g>
          </Icon>
        </Circle>
    )

const Circle = styled(FlexContainer)`
  width: 32px;
  height: 32px;
  border-radius: 18px;
  border: 2px solid ${colors.primary700};

const Path = styled.path`
  fill: none;
  stroke: ${colors.primary700};
`;

const Icon = styled.svg`
  width: 18px;
  height: 10px;

  &:disabled ${Path} {
    stroke: ${colors.primary300};
  }
`

  <Section flexDirection="column">
    <SectionTitle>My Food Preferences</SectionTitle>
    <Collapsible trigger={<StyledCollapseIcon/>}>
      <FoodPrefsForm />
    </Collapsible>
  </Section>

const StyledCollapseIcon = styled(CollapseIcon)`
  position: absolute;
  top: 0;
  right: 0

  ${'' /* float: right;
  margin-top: -50px; */}
`

我的食物偏好
const StyledCollapseIcon=已设置样式（CollapseIcon）`
位置：绝对位置；
排名：0；
右：0
${'/*浮点：右；
页边距顶部：-50px；*/}
`

绝对

定位是绝对的，相对于最近的

位置：相对

祖先。给出圆圈的

位置：relative

，看看这是否能解决问题

---

CSS技巧有一个。

圆圈组件是设置

位置：绝对值的StyledCollapseIcon组件的后代。但我试着把所有的后代都设置为位置：相对的和位置：绝对的，两种方式都没有帮助。