css - 无法让元素堆叠

Question

CSS 不一定是我的强项，但我不知道为什么我不能让这两个元素堆叠起来？我将父位置设置为 relative和 child absolute我也给 child 更高的z-index但就是无法让它工作。 <Icon />总是向右偏移。

代码

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const propTypes = {
  iconName: PropTypes.string,
  color: PropTypes.string,
};

const defaultProps = {
  iconName: 'add_box',
  color: '#27B678',
};

const MaterialIcon = props => (
  <i className={`material-icons ${props.className}`}>
    {props.iconName.replace(/['"]+/g, '')}
  </i>
);

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

const Divider = props => (
  <div
    className="mx2"
    style={{ position: 'relative', border: '1px solid #ececec' }}
  >
    <Icon
      iconName={props.iconName}
      color={props.color}
    />
  </div>
);

Divider.propTypes = propTypes;

Divider.defaultProps = defaultProps;

export default Divider;

Answer 1

您需要使用 top 和 left 将图标放置在分隔线上方。您应该给 left 一个等于图标宽度一半的负值，以便它在分隔线上方居中。例如，如果图标宽度为 50 像素，您的 Icon 样式应如下所示:

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

确保还为分隔线设置了 0 的 z-index，以便图标显示在其顶部。