html - CSS Fixed - 将 HTML 元素保持在适当位置的替代方法

Question

我想创建一个网页，顶部有一个包含标题的部分，然后是下面一个包含数据的部分。然后我希望标题保持可见，并且数据能够以与在 Excel 中锁定行相同的方式滚动。

<div id="heading">This is my Heading</div>
<div id="data">
   <a>1st line of Data</a>
   <a>2nd line of Data</a>
</div>

现在我知道我是否在我的 css 中设置了 #heading { position: fixed;顶部:0px； left: 0px } 然后我的标题将留在原处，我的数据可以在它下面滚动。但是还有另一种方法吗？

我想找到不同方法的原因是我有一个使用 Frames 的遗留应用程序(是的，我知道所有不这样做的原因 - 但如果你们中的任何人与你的老板交谈过，你解释了修复一个小错误是一个完整的重写，他/她说是的，然后我想和你一起工作!)我们在框架中有固定元素，但如果框架设置为零大小(关闭)然后再次重新打开它们只是无法在 Mac 上的 Safari 中看到。这些元素仍在 DOM 中，它们应该是可见的，甚至可以看到它们的工具提示并且它们的点击事件也有效。

因此，在尝试让它们显示几个小时后，我认为值得寻找 css fixed 的替代方案。

Answer 1

一种选择是使用 absolute 而不是 fixed。其他解决方案是只滚动内部内容:

#data {
  max-height: 150px;
  overflow: auto;
}

<div id="heading">This is my Heading</div>
<div id="data">
  <a>1st line of Data</a>
  <a>2nd line of Data</a>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in lobortis dolor. Mauris dictum dui non tristique pharetra. Ut efficitur neque vitae consequat ullamcorper. Aenean convallis velit urna, nec convallis lectus interdum sit amet. Nullam
    quis vulputate eros. Aenean tincidunt laoreet urna, vel finibus metus tempor sagittis. Fusce eget faucibus felis. Sed tempus arcu nec egestas feugiat. Pellentesque est nulla, scelerisque nec porta vitae, suscipit at mauris. Sed pulvinar ullamcorper
    nisi, sit amet euismod leo. Etiam facilisis pharetra dui. Nulla a vulputate purus. Phasellus fringilla velit id ex luctus faucibus. Vivamus laoreet, eros sit amet ornare elementum, eros dolor sollicitudin lorem, non vehicula tortor sapien vitae sem.
    Fusce et augue ex. Aliquam aliquet mauris mattis neque ornare interdum. Donec sed consequat massa. Praesent sem diam, placerat eu arcu sed, euismod auctor est. Pellentesque fringilla, lorem ac molestie consequat, libero augue consectetur lacus, sed
    accumsan ex leo et velit. In quis rhoncus est, sit amet dignissim nibh. Aliquam malesuada bibendum erat, vitae rutrum dolor sagittis eu. Cras in iaculis sapien. Ut ultricies non felis eu cursus. Curabitur facilisis lacus sit amet lacus vulputate posuere.
    Mauris id tellus ultricies, maximus justo vitae, ornare sem.
  </p>
</div>