Overlay fixed on top of div and keep position page scrolled

Question

I've the following example below. When you click the yellow box, an overlay will be shown and it works fine. But when i then scroll down it ofc stays because it has a position fixed.

How can i make sure the overlay stay ontop of the .div when i scroll, aka so it "don't move"?

 $('.modal').css("top", $(".div").offset().top).css("left", $(".div").offset().left).css("width", $(".div").css("width")).css("height", $(".div").css("height")); $(".div").click(function() { $('.modal').addClass("loading"); }) 

 .div { margin-top: 100px; margin-left: auto; margin-right: auto; height: 300px; width: 300px; background-color: yellow; content: ""; } body { height: 500px; background-color:black; } .modal { display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat; } .modal.loading { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div"></div> <div class="modal"></div> 

Answer 1

Change your position to absolute .

.modal {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}

Answer 2

Change the fixed position of the modal with a absolute position , place the .modal in the .div

 $(".div").click(function() { $('.modal').addClass("loading"); }) 

 .div { margin: 100px auto 0; height: 300px; width: 300px; background-color: yellow; position: relative; } body { height: 500px; background-color: black; } .modal { display: none; position: absolute; top:0; left:0; z-index: 2; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat; } .modal.loading { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div"> .div content <div class="modal"></div> </div> 

Answer 3

I think you want something like this, tell if i'm doing something wrong.

First you need to change position: fixed; with position: absolute; in modal class. Then put modal class div into class div like this

<div class="div">
  <div class="modal"></div>
</div>

check snippet for running in action

 $(".div").click(function() { $('.modal').addClass("loading"); }) 

 .div { margin-top: 100px; margin-left: auto; margin-right: auto; height: 300px; width: 300px; background-color: yellow; position: relative; } body { height: 500px; background-color: black; } .modal { display: none; position: absolute; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat; } .modal.loading { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div"> <div class="modal"></div> </div>