覆蓋固定在div頂部並保持位置頁滾動

Question

我在下面的例子。當你點擊黃色框時，一個疊加層將顯示出來並且工作正常。但是，當我然後向下滾動它停留，因爲它有一個固定的位置。

當我滾動時，我如何確保覆蓋層保持在.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>