I’m making a popup for a website, and have these styles currently

.popup {
    display: none;
    position: fixed;
    top: 27px;
    left: 27px;
    width: 30vw;
    aspect-ratio: 16 / 9;
    z-index: 1000;
}

.popup.active {
    display: initial;
}

A javascript function applies the .active class to the element to open the window, changing the display from none to intial, which would be block, the issue is that the button that opens the pop-up is further down the page and when clicking it, takes you to the top where the pop-up is positioned no matter what, even though it’s got a position of fixed.

I’m thinking the only way would be to have the html code for the pop-up element be directly before the pop-up open button, so the open position would be there, but I don’t really want to do that for readability reasons.