Make an overlay div fill entire of a container having overflow - html

Question

I want to display a loader inside the container. I am trying to display the overlay div inside the container.
if I use absolute position, the overlay also going top.
Here is Fddle : http://jsfiddle.net/vaykmry4/5/
Code :
<style>
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
width:100%;
height:100%;
margin:auto;
left:0;
top:0;
position:absolute;
background:#fff;
opacity:.8;
text-align:center;
}
.loader {
display:inline-block;
}
</style>
<div class="container">
<div class="overlay">
<span class="loader">
loading...
</span>
</div>
<div class="content">Here is content ... <div>
</div>
Thanks.

Answer 1

First of all I should note that a fixed element is positioned relative to the initial containing block which is established for the html element.
Hence you should use absolute positioning to position the overlay relative to its nearest containing block which is established by the container.
.container {
position: relative;
overflow: auto;
}
.overlay { position: absolute; }
Second, It will work until the content start growing. When the content height gets bigger than the overlay, the overlay will not fill the entire space of the container anymore.
Since you may use JavaScript in order to to display the overlay (including loading, etc.) one solution is to add overflow: hidden; to the container to prevent from scrolling.
Finally, you should set top property of the .overlay element according to the position of the vertical scroll-bar.
Here is the jQuery version of the above approach:
var $container = $(".container");
$(".overlay").fadeIn().css("top", $container.scrollTop() + "px");
$container.css("overflow", "hidden");
EXAMPLE HERE

Answer 2

You are using margin: 25% on container which is causing the gap of 50% top-bottom value for overlay, so use height: 150% instead of 100%
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
width:100%;
height: 150%;
margin:auto;
left:0;
top:0;
bottom: 0;
right: 0;
position:absolute;
background:#000;
opacity:.5;
}
.content {
height:300px;
}
working fiddle

Answer 3

position: absolute will let you place any page element exactly where you want it with the help of top right bottom left attributes. These values will be relative to the next parent element.
position: fixed is a special case of absolute positioning. A fixed position element is positioned relative to the viewport.
In your case you should use position: absolute for your .overlay

Answer 4

Use this:
HTML:
<div class="container overlay">
<div class="content"><div>
</div>
CSS:
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
margin:auto;
left:0;
top:0;
position:relative;
background:#000;
opacity:.5;
}
.content {
height:300px;
}
Here is the working fiddle