スタックする要素を取得できません。

Question

CSSは必ずしも強いものではありませんが、なぜこれらの2つの要素をスタック化できないのかわかりません。私は親の位置をrelativeに設定し、子はabsoluteに設定しました。私は子供にもっと高いz-indexを与えますが、動作させることはできません。 <Icon />は常に右にオフセットされています。

あなたは除算器の上にアイコンを配置するtopとleftを使用する必要があるコード

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

。 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; 
`; 

アイコンがそれの上に表示されるように、またあなたの分周器0のz-indexを与えるようにしてください。