Impossible d'obtenir des éléments à empiler

Question

CSS est pas nécessairement mon point fort, mais je ne sais pas pourquoi je ne peux pas obtenir ces deux éléments à pile? Je mets la position mère à l'enfant et relative à absolute Je donne aussi l'enfant une plus z-index mais je ne peux pas le faire fonctionner. Le <Icon /> est toujours décalé vers la droite.

code

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

Vous devez utiliser top et left pour positionner l'icône sur le séparateur. Vous devez donner à left une valeur négative égale à la moitié de la largeur de l'icône afin qu'elle soit centrée sur le diviseur. Par exemple, si la largeur de l'icône est 50px, votre style Icon devrait ressembler à ceci:

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

Assurez-vous de donner également votre diviseur un z-index de 0 pour que l'icône apparaît au-dessus de celui-ci.