Html 位置绝对与滚动页面_Html_Css

Html 位置绝对与滚动页面

html css

Html 位置绝对与滚动页面,html,css,Html,Css,当我在div上使用以下css时： position: absolute; bottom: 70px; left: 0; right: 0; margin: auto; 我的想法是把div放在中间（垂直），从页面底部放置70px。当整个页面在视口中可见时，此操作有效，但是当页面可滚动时，div的位置是距视口底部70px，而不是距页面底部70px。我如何解决这个问题编辑：以下是相关的HTML： <body> ... <div class="bo

当我在div上使用以下css时：

  position: absolute;
  bottom: 70px;
  left: 0;
  right: 0;
  margin: auto;

我的想法是把div放在中间（垂直），从页面底部放置70px。当整个页面在视口中可见时，此操作有效，但是当页面可滚动时，div的位置是距视口底部70px，而不是距页面底部70px。我如何解决这个问题

编辑：

以下是相关的HTML：

<body>
...

<div class="bottomNav">
  <img src="images/instacircle.png" alt="instagram-icon" id="insta-icon" />
  <img src="images/mailcircle.png" alt="mail-icon" id="mail-icon" />
</div>
</body>

主体（父对象）的css是：

您应该相对于页面顶部定位div，而不是：

bottom: 70px;

您需要使用：

top: calc(100vh - 70px);

最有可能（您没有提供源代码）div有一个未定位的元素作为父元素，因此将“绝对”相对于视口定位

最常见的解决方案，如果是这种情况：设置

在父元素上。

位置：固定

将以屏幕为参考，它可能是您需要的：）不太清楚，可能我的问题不清楚。我想把div放在离页面底部70像素的位置。因此，当Im滚动到顶部时，div不应可见。当我向下滚动到页面底部时，我想看到div。如果清楚的话。你能添加基本的HTML结构来查看绝对元素的位置和页面内容的位置吗。家长/孩子的相对/绝对值可能是一个提示，如果不是猜测的话。这解决了问题，非常感谢！）

bottom: 70px;

top: calc(100vh - 70px);

position: relative;