Почему не работает position: fixed?

Хочу сделать эффект увеличительного стекла в Реакте. Надо, чтобы при наведении "стекла" на текст, внутри этого "стекла" отображался увеличенный текст. Есть параграф с обычным размером текста и контейнер со "стеклом" и большим размером. Экспериментирую с позиционированием, но когда у .large ставлю position: fixed, весь большой текст фиксируется во весь экран и overflow: hidden у "стекла" не работает, а когда меняю на relative или absolute - эффект получается правильный(текст только внутри стекла), но этот текст двигается по экрану вместе со стеклом. В чем тут проблема?

import React, { useState} from 'react'
import './App.css'

const App = () => {
    const [mousePosition, setMousePosition] = useState({ x: null, y: null })
    const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae lacinia elit. Aenean nec tempus velit. Curabitur sagittis erat tortor, quis rhoncus augue facilisis at. Sed non congue lorem. Nulla facilisi. Cras nunc enim, placerat non posuere in, condimentum eu lectus. Mauris et quam orci. Mauris nec dictum magna, nec sagittis metus./n Duis luctus, ante at facilisis gravida, mi magna ultricies massa, eleifend congue magna sapien id dui. Vivamus sed ornare orci, non sagittis nisl. Nulla turpis turpis, commodo vitae auctor et, bibendum non purus. Maecenas pharetra in nulla a facilisis.'
    const [styleGlass, setStyleGlass] = useState({top: null, left: null})

    const updateMousePosition = (e) => {
        setMousePosition({ x: e.clientX, y: e.clientY }) 
        setStyleGlass({top: mousePosition.y-60, left: mousePosition.x-60}) 
    }
  
    return (
        <>
            <h2>Lense Effect</h2>
           
                <div className="container">
                    <div className="glass" style={styleGlass}>
                        <p className="large">{text}</p>
                    </div>
                </div>
                    
                <p onMouseMove={updateMousePosition}>
                    {text}
                </p>
            
        </>
    )
}
export default App

h2{
    text-align: center;
}
p{
    margin: 1vh 2vw;
    z-index: 0;
}
.container{
    position: relative;
}
.glass{
    position: absolute;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    background: rgb(246,248,252);
    background: radial-gradient(circle, rgba(246,248,252,1) 0%, rgba(130,213,245,1) 100%);
    z-index: 30;
    opacity: 0.7;
    overflow: hidden;
}
.large{
    position: relative;
    float: left;
    top:1vh;
    left:2vw;
    font-size: x-large;
    z-index: 1;
}