html - 将 header 修复到溢出 : auto; 的容器顶部

Question

我在 overflow: auto; 容器中有一些内容:

https://jsfiddle.net/h4y37qwu/

<div class="container">
<div class="header">

</div>
  <div class="content">

  </div>
</div>

CSS

.container {
  width: 500px;
  height: 200px;
  overflow: auto;
  position: relative;
}
.header {
  width: 1000px;
  height: 50px;
  background-color: blue;
  position: absolute;
  top: 0; left: 0;
}
.content {
  width: 1000px;
  height: 1000px;
  background: green;
}

我尝试将 .header block 修复到 .container 的顶部，以便在您滚动时修复它。但是，它不适用于 position: absolute; 有什么想法吗？

Answer 1

我觉得你需要

position:fixed.  

这就是你想要的

.header {
 width: 1000px;
 height: 50px;
 background-color: blue;
 position: fixed;
 top: 0; left: 0;
}