我有一个绝对放置的 div，它使用这样的 CSS:
.overlay {
position:absolute;
margin:0.5%;
z-index:100;
}
.topRightOverlay {
top:0;
right:0;
}
我的正文和 HTML 都有最小高度和宽度。但是，当我将浏览器窗口缩小到最小尺寸以下时，绝对 div 不会停留在最右上角，而是跟随视口(viewport)进入，然后在我滚动时保持定位(不跟随视口(viewport)向后)。
我怎样才能确保这个 div 保持在 HTML/body 的右上角，即使这意味着在滚动到之前不在屏幕上？
这是 HTML 结构:
<html lang="en">
<body>
<form runat="server">
<div class="overlay topRightOverlay">
<!-- overlay content -->
</div>
<!-- content placeholder for content pages -->
</form>
</body>
</html>
还有 HTML，正文 CSS:
body, html {
height: 100%;
min-height:600px;
min-width:800px;
overflow:hidden;
}
html {overflow:auto;}
body,
html {
height: 100%;
min-height: 600px;
min-width: 800px;
overflow: hidden;
}
html {
overflow: auto;
}
form {
height: 100%;
}
.overlay {
position: absolute;
margin: 0.5%;
z-index: 100;
}
.topRightOverlay {
top: 0;
right: 0;
}<html lang="en">
<body>
<form runat="server">
<div class="overlay topRightOverlay nonInteractive">
This is an overlay
</div>
<!-- content placeholder for content pages -->
</form>
</body>
</html>最佳答案
如果我理解正确的话:
你必须给 body position: relative 并添加一些 javascript 来保持 absolute 元素的 offset()。
自己看看
$(document).ready(function(){
var posY;
document.onscroll = function(){
posY = 100 + $(window).scrollTop();//locate needed Y position
$("#absDiv").offset({top: posY}); //Apply position
};
})body{
margin:0;
padding:0;
width: 100%;
position: relative;
}
section {
height: 1500px;
width:100%;
background-color: #2ecc71;
}
#absDiv {
width: 80px;
padding: 5px;
line-height: 17px;
position:absolute;
right:0;
top:100px;
background-color: #d35400;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="absDiv">
I'm pretty fixed to this place...
</div>
<section>
</section>
</body>希望我没说错并帮助到你 :)
干杯，
创想
关于html - 通过滚动使绝对 div 位于屏幕外，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36153880/