I want to create a full-screen, vertically centered div that overlays all content below it.
/* css */
#overlay {
background: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
}
/* Applies to the <body> tag */
.overlay-hidden {
overflow: hidden;
}
<!-- html -->
<body class="overlay-hidden">
<div id="overlay">
<!-- Content of overlay goes here -->
</div>
<div class="container">
<!-- Main content goes here -->
</div>
</body>
Check out my code here: https://jsfiddle.net/uzy78s69/. It works well, but when I add more content to #overlay, it doesn't behave as expected: https://jsfiddle.net/uzy78s69/1/
Click on the X or Create new post link to see how it behaves.
What am I doing wrong? How can I fix this issue?