通过滚动使绝对 div 定位在屏幕外

Question

我有一个绝对放置的 div，它使用 CSS 这样的：

.overlay {
  position:absolute;
  margin:0.5%;
  z-index:100;
}
.topRightOverlay {
  top:0;
  right:0;
}

我的 body 和 HTML 都有 min-height 和宽度。但是，当我将浏览器 window 减小到最小尺寸以下时，绝对 div 不会粘在最右上角，而是跟随视口进入，然后在我滚动时保持定位（不跟随视口向后）。

我如何确保这个 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, Body 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>

Answer 1

将绝对位置与 .topRightOverlay class 结合使用。希望能解决问题

Answer 2

如果我理解正确的话：

您必须给正文 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>

希望我没猜错并帮助到你:)

干杯，

创维

通过滚动使绝对 div 定位在屏幕外

make an absolute div be positioned off screen with scrolling

html

css

scroll

absolute