无法让元素堆叠

Question

CSS不一定是我的强项，但我不知道为什么我不能让这两个元素叠加？我将父位置设置为 relative，将子位置设置为 absolute 我也将子位置设置为更高 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 一个等于图标宽度一半的负值，以便它在分隔线上方居中。例如，如果图标宽度为 50px，您的 Icon 样式应如下所示：

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，这样图标就会出现在它上面。

无法让元素堆叠

Can't get elements to stack

css

reactjs

styled-components