绝对定位元素的放置

Question

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

当我用滚动表搞乱时，似乎有一个奇怪的情况，表格标题内的div元素将其父元素th的元素置入其中，该元素没有相对定位。为什么会这样？

的jsfiddle：http://jsfiddle.net/3vGwP/

CSS：

/* table borders */ 

.scrollArea table tr th:first-child .th-inner { 
    border-left: none; 
} 
.scrollArea table tbody tr td { 
    border: 1px solid #CCC; 
    border-right: 0px; 
    border-bottom: 0px; 
} 

/* scrollable table */ 

.scrollableContainer { 
    height: 283px; 
    position: relative; 
    padding-top: 22px; 
    width: 756px; 
} 

.scrollableContainer .headerSpacer { 
    border: 1px solid #d5d5d5; 
    border-bottom-color: #bbb; 
    position: absolute; 
    height: 21px; 
    top: 0; 
    right: 0; 
    left: 0; 
} 

.scrollArea { 
    height: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    border: 1px solid #d5d5d5; 
} 

.scrollArea table { 
    overflow-x: hidden; 
    overflow-y: auto; 
    margin-bottom: 0; 
    border: none; 
    border-collapse: separate; 
} 

.scrollArea table th { 
    padding: 0; 
    border: none; 
} 

/* using absolute positions means the original table header has no content, hence is collapsed */ 

.scrollArea table .th-inner { 
    position: absolute; 
    top: 0; 
    height: 21px; 
    border-left: 1px solid #ddd; 
} 

HTML：

<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> 
      ... 

Answer 1

这是一个已知的问题。解释说明Here可以为你工作。

这里是它如何应用到你的情况下一个简单的例子：

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