Как расположить одно изображение относительно другого?

Question

Я пытаюсь позиционировать одно изображение относительно другого и определить его точное позиционирование относительно него отсюда. Однако сейчас я тестирую его, и при определении 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>
        )