I have in my page a button which when clicked displays a div
(popup style) in the middle of my screen.
I am using the following CSS to center the div
in the middle of the screen:
.PopupPanel
{
border: solid 1px black;
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
This CSS works fine as long as the page is not scrolled down.
But, if I place the button at the bottom of my page, when it is clicked, the div
is displayed at the top, and the user has to scroll up to view the contents of the div
.
I would like to know how to display the div
in the middle of the screen, even when the page has been scrolled.
Change the position
attribute to fixed
instead of absolute
.