Question

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

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

我的身体和HTML都有最小高度和宽度。但是，当我将浏览器窗口缩小到最小尺寸以下时，绝对div不会粘到远端右上角，而是跟随视口进入，然后在滚动时保持定位（不跟随视口返回）。

如何确保此div保持在HTML /正文的右上方，即使这意味着在滚动到屏幕之前不在屏幕上？

这是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

如果我理解正确的话：

您必须提供正文position: relative并添加一些javascript以保留offset()元素的absolute。

自己看看

＆＃13;

$(document).ready(function(){
var posY;
document.onscroll = function(){
	posY = 100 + $(window).scrollTop();//locate needed Y position 
	$("#absDiv").offset({top: posY}); //Apply position
};
})

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

希望我能帮到你并帮助你：）

干杯，

研祥

Answer 2

使用.topRightOverlay类的绝对位置。希望能解决问题

使用滚动将绝对div定位在屏幕外

2 个答案: