Question

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

<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块修复到.container的顶部，以便在滚动时修复它。但是，它不能与position: absolute;任何想法一起使用吗？

Answer 1

我认为你需要

position:fixed.

这是你需要的

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

Answer 2

尝试：

position: fixed;

执行此操作后，您必须根据容器调整标题的边距：

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

Fiddle

Answer 3

你走了，我做了一些改变：

不再position: absolute;

您的.content元素

overflow: auto

https://jsfiddle.net/h4y37qwu/2/

Answer 4

如果您需要使用position: absolute;，您可以使用jquery和滚动功能在每次滚动时偏移顶部。

请参阅https://jsfiddle.net/rvkh3v4n/

$('.container').scroll(function() { 
  $('.header').offset({ top: 8 });
});

使用overflow：auto修复标题到容器顶部;

4 个答案: