Kann Elemente nicht zum Stack bekommen

Question

CSS ist nicht unbedingt meine starke Farbe, aber ich habe keine Ahnung, warum ich diese beiden Elemente nicht zum Stapeln bringen kann? Ich setze die Elternposition auf relative und das Kind auf absolute Ich gebe dem Kind auch eine höhere z-index, aber es kann einfach nicht funktionieren. Die <Icon /> ist immer nach rechts versetzt.

-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

Sie benötigen top und left verwenden, um das Symbol über den Teiler zu positionieren. Sie sollten left einen negativen Wert geben, der der halben Breite des Symbols entspricht, so dass er über dem Teiler zentriert ist. wenn das Symbol Breite 50px Zum Beispiel ist Ihr Icon Stil soll wie folgt aussehen:

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

Stellen Sie sicher, auch Ihren Teiler gibt ein z-index von 0, so dass das Symbol oben drauf erscheint.