如何制作一个与 CSS 中其他元素交互的固定元素？

Question

我想将图像放置在页面底部，比如说

top: 70%

周围。无论上面添加多少元素，图像都不应该受到它们的影响。当元素到达图像时，图像才应该开始进一步向下移动，就好像它默认设置到位一样。

例如：

Answer 1

为了让某些东西始终保持在底部，使用 flexbox 的一种方法是使用一个包装器 div，从屏幕顶部移动到您想要的任何距离（如果有更多内容，则允许它走得更远）待显示）。然后为该 div 提供两个 div 子级，一个用于顶部，另一个用于底部。在 div 包装器上使用

space-between

将 div 隔开，并确保

flex-direction

属性设置为

column

，以便内容从上到下流动，然后底部内容 div 将始终位于 div 包装器的底部。请参阅下面的示例实现。

const pCountRange = document.getElementById("p-count");
const pDiv = document.getElementById("top");
pCountRange.addEventListener("input", () => {
  let pCount = pCountRange.value;
  while (pDiv.firstChild) {
    pDiv.removeChild(pDiv.lastChild);
  }
  for (let i = 0; i < pCount; i++) {
    let p = document.createElement("p");
    p.textContent = "Always on the top!";
    pDiv.appendChild(p);
  }
});

#wrapper {
  background-color: #eee;
  width: 250px;
  min-height: 300px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
}

<!DOCTYPE html>
<html>

<body>
  <input type="range" id="p-count" name="p-count" min="1" max="11" value="3">
  <div id="wrapper">
    <div id="top">
      <p>Always on the top!</p>
      <p>Always on the top!</p>
      <p>Always on the top!</p>
    </div>
    <div id="bottom">
      <p>I'm always at the bottom.</p>
    </div>
  </div>
</body>

</html>

如何制作一个与 CSS 中其他元素交互的固定元素？

问题描述投票：0回答：1

1个回答

最新问题

如何制作一个与 CSS 中其他元素交互的固定元素？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1