如何将一幅图像相对于另一幅图像放置？

Question

我正在尝试相对于另一张图像定位，并从此处相对于其定义确切的定位。但是，我现在正在测试它，并且为 second 图片定义top时，它出现在窗口的 top 而不是窗口的顶部更大的图像。有人知道我哪里出问题了吗？

render(){

        let style1 = {
            position:'relative',
            margin:'0',
            width: `${this.pitchWidth}%`,
            height: `${this.pitchWidth/this.imageRatio}%`,
            left: `${this.pitchCenter}`,
            transform:'translate(-50%,0)'

        }

        let style2 = {
            position:'absolute',
            top:0, 
            left:`${this.pitchCenter}`,
            transform:'translate(`${this.pitchWidth}`,0)'
        }

        return (
            <div>
            <div className="pitch-container">
                <img src='Football_Field.png'  style={style1}/>
                <i className="fas fa-tshirt GK" ref={this.playerRef} style={style2}></i> 
            </div>

            </div>
        )