絕對定位元素的放置

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