固定在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>