修复了容器div

Question

我正在开发一个html和css页面，并且在滚动页面时尝试保持文本固定不变。

我有3个div，每个div都有其h1标题。

是否可以滚动页面，使div移动时标题保持固定位置？

.corpo{
  width:80%px;
  height:1200px;
  border: 1px solid black;
  margin:20px;
  margin-bottom:50px;  
}

<div class="corpo">
  <h1> Title 1</h1>
</div>

<div class="corpo">
  <h1> Title 2</h1>
</div>

<div class="corpo">
  <h1> Title 3</h1>
</div>

Answer 1

实现所需内容的最简单方法是使用position: sticky并根据您希望top相对于容器h1粘贴的位置指定div。有关示例，请参见下面的代码段

：

.corpo {
  width:80%px;
  height:1200px;
  border: 1px solid black;
  margin:20px;
  margin-bottom:50px;  
}

.corpo h1 {
  position: sticky;
  top: 20px;
}

<div class="corpo">
  <h1> Title 1</h1>
</div>

<div class="corpo">
  <h1> Title 2</h1>
</div>

<div class="corpo">
  <h1> Title 3</h1>
</div>