Clip element to right when changing screen size - css

Question

I have this element that is on my login screen that I would like when the screen changes size, it holds position. Only today I test on different screen sizes, it moves. How can I make him get stuck in this position?
My code:
export const ContainerLogin = styled(Grid).attrs({
item: true,
})`
background-color: var(--white-100);
position: absolute;
z-index: 2;
left: 1242px;
width: 520px;
height: 528px;
top: 226px;
border-radius: 4px;
`;
Update:
Code:
return (
<ContainerMain >
<ContainerImagem >
<img src={backgroundFull} style={{ position: 'fixed', minWidth: '100%', minHeight: '100%', backgroundSize: 'cover', backgroundPosition: 'center', bottom: 0, left: 0, top: 0, right: 0 }} />
</ContainerImagem>
<ContainerLogin>
<motion.div
>
{children}
</motion.div>
</ContainerLogin>
</ContainerMain>
);
};
Style:
export const ContainerMain = styled(Grid).attrs({
container: true,
})`
align-items: center;
overflow: hidden;
`;
export const ContainerImagem = styled(Grid).attrs({
item: true,
})`
align-items: center;
display: flex;
`;
export const ContainerLogin = styled(Grid).attrs({
item: true,
})`
/* position: fixed; */
background-color: var(--white-100);
position: fixed;
z-index: 2;
right: 0;
width: 520px;
height: 528px;
top: 226px;
border-radius: 4px;
/* z-index: 2;
left: 1242px;
width: 520px;
height: 528px;
top: 226px;
border-radius: 4px; */
`;
Imagem result:
image example
My screen in this image is zoomed to 80%

Answer 1

if you go into full page view and resize the window.it will always be on the right side of the window
img {
width: 60vw;
}
.rightelem {
background-color: cyan;
position: absolute;
z-index: 2;
right: 0;
width: 220px;
height: 228px;
top: 126px;
border-radius: 4px;
}
<div>
<img src="https://images.unsplash.com/photo-1664736607930-288b58f7e720?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80">
</div>
<div class="rightelem">
i am on the right side</div>