Html 绝对定位元素的放置

根据我的理解，绝对定位元素只受其最近祖先的影响，该祖先具有相对或固定的位置

当我摆弄滚动表时，似乎有一种奇怪的情况，表头中的div元素考虑了它的父

th

元素，该元素不是相对定位的。为什么会这样

jsfiddle：

css:

html:

标题1
标题2
标题3
aaaaaaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbb
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
...

这是一个已知的问题。这是一个对你有用的解决方案

以下是如何将其应用于您的案例的简要示例：

...
<th>
    <div style="position:relative; overflow: auto; height: 100%;">
        <div class="th-inner">Header 1</div>
    </div>
</th>
...

。。。
标题1
...

正如@clami219的回答所示，你是否只在Firefox中看到了这个问题？我在chrome（36金丝雀）和Firefox（29）上测试过它，它们都给出了相同的结果，如果相同的错误存在于完全不同的平台上，那就相当令人惊讶了。而且，自从这项测试表明chrome运行得很好。根据博客帖子，我只是想澄清一下，这是一个在大多数主流浏览器上都存在的bug？@simonzack这篇博文指出这是一个仅限FF的bug：

Chrome？检查。Internet Explorer？检查。火狐？啊，FML。

。这就提出了一个问题：您是否看到了相同的bug。

<div class="scrollableContainer">
  <div class="headerSpacer"></div>
  <div class="scrollArea">
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
      <thead class="fixedHeader">
        <tr>
          <th>
            <div class="th-inner">Header 1</div>
          </th>
          <th>
            <div class="th-inner">Header 2</div>
          </th>
          <th>
            <div class="th-inner">Header 3</div>
          </th>
        </tr>
      </thead>
      <tbody class="scrollContent">
        <tr>
          <td>aaaaaaaaaaaaaaaa</td>
          <td>bbbbbbbbbbbbbbbb</td>
          <td>cccccccccccccccccccccccccccccccc</td>
          ...

...
<th>
    <div style="position:relative; overflow: auto; height: 100%;">
        <div class="th-inner">Header 1</div>
    </div>
</th>
...