I am working with a fixed position div that is always centered in the browser viewport.
Within this div, there is another div set to absolute positioning. It seems like this inner div is actually being positioned relative to the HTML document since there are no parent elements with absolute or relative positioning.
I need both of these divs to stay centered in the viewport while the inner div also remains relative to its parent container. They should move together seamlessly while maintaining their centering within the viewport.
I have tried using fixed and relative positioning on the inner div, but they do not move together smoothly as intended.
#outer-div {
width: 100%;
position: fixed;
top: 50%;
z-index: 100;
}
#inner-div {
top: 35%;
left: 30%;
position: ??? ;
}
Any suggestions or assistance would be greatly appreciated! Thank you!