固定在div顶部的叠加层，并保持滚动位置页面

Question

我下面有以下示例。 当您单击黄色框时，将显示一个覆盖图，并且效果很好。 但是当我向下滚动时，ofc保持不变，因为它的位置已固定。

滚动.div如何确保覆盖层保持在.div ，又称“不动”？

 $('.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

将您的位置更改为绝对 位置 。

.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

用绝对位置更改模态的固定位置，将.modal放在.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

我想你想要这样的东西，告诉我我做错了什么。

首先，您需要更改position: fixed; position: absolute; 在模态课上。 然后像这样将模式类div放入类div中

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

检查代码段是否运行正常

 $(".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>