Css Can'；不要让元素堆叠

CSS不一定是我的强项，但我不知道为什么我不能将这两个元素堆叠起来？我将父位置设置为

relative

，子位置设置为

absolute

，我也给了孩子一个更高的

z-index

，但就是无法让它工作。

始终向右偏移

代码

从“React”导入React；
从“道具类型”导入道具类型；
从“样式化组件”导入样式化；
常量属性类型={
iconName:PropTypes.string，
颜色：PropTypes.string，
};
const defaultProps={
iconName:“添加框”，
颜色：“#27B678”，
};
const MaterialIcon=props=>(
{props.iconName.replace（/['''']+/g'，）}
);
常量图标=样式化（MaterialIcon）`
颜色：${props=>props.color.replace（/['“]+/g'，）}；
字体大小：36px；
位置：绝对位置；
z指数：10；
排名前10%；
左：0；
右：0；
底部：0；
`;
常量分隔符=道具=>(
);
Divider.propTypes=propTypes；
Divider.defaultProps=defaultProps；
导出默认分隔符；

您需要使用

顶部

和

左侧

将图标定位在分隔器上方。您应该给

left

一个等于图标宽度一半的负值，使其位于分隔符的中心。例如，如果图标宽度为50px，则您的

图标

样式应如下所示：

const Icon = styled(MaterialIcon)`
  color: ${props => props.color.replace(/['"]+/g, '')};
  font-size: 36px;
  position: absolute;
  z-index: 1;
  top: 10%;
  left: -25px;
`;

---

确保为分隔符指定一个

z-index

为0，以便图标显示在其顶部。

如果父元素具有相对位置，则在父元素中的任何其他元素上使用绝对值，则不需要z-index，只需使用顶部、左侧、右侧和底部来定位元素

const Icon = styled(MaterialIcon)`
  color: ${props => props.color.replace(/['"]+/g, '')};
  font-size: 36px;
  position: absolute;
  z-index: 1;
  top: 10%;
  left: -25px;
`;