位置绝对位置固定

Question

我想知道是否可以通过将它们的位置设置为绝对位置来使位置固定的父元素中的元素不与滚动条相对移动。 Modalstyles 是模态，占据整个屏幕并具有固定的位置，因此它会随着滚动条移动。 modalstyles 中的元素是 X 和 nowPlaying。我希望这些元素留在同一个区域，而不是随滚动条移动。绝对定位会解决这个问题吗？

return (
    <>
    <div className = {styles.modalStyles}>
        <div className = {styles.close}>X</div>
        <div className = {styles.nowPlaying}>Now Playing</div>
    </div>
    </>
)

.modalStyles{
    min-height: 100vh;
    width: 26vw;
    position: fixed;
    left: 74%;
    top: 0%;
    background-color: whitesmoke;
    z-index: 1000;
}

.close{
    color: black;
    display: inline-flex;
    display: fixed;
    margin-left: 10px;
    margin-top: 90px;
    position: absolute;
    cursor: pointer;
}

.nowPlaying{
    display: inline-flex;
    display: fixed;
    position: absolute;
    margin-top: 150px;
    margin-left: 50px;
    color:#181B2C;
    font-weight: bold;
}