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