定位一個div

Question

內一個div我有以下的div表：

<div style="display:table"> 
    <div style="display:table-row"> 
    <div style="display:table-cell"> 
     <div id="innerDiv"></div> 
    </div> 
    </div> 
</div> 

在細胞內是id爲 「innerDiv」 一個div。有沒有一種方法來定位這個div，使其頂部/左側角落位於單元格內的任何位置？我嘗試了所有的CSS位置值，但沒有工作。

Answer 1

我們不應該給予同樣的元素table-cell display和relative position。它在現代瀏覽器之間不被支持（在FF中試試這個）。

如果這是您可以在特定情況下執行操作的唯一方法，請在單元格內添加相對定位的wrapper div。

例如：

<div style="display:table"> 
    <div style="display:table-row"> 
    <div style="display:table-cell"> 
     <div class="relativeDiv"> 
      <div id="innerDiv"></div> 
     </div> 
    </div> 
    </div> 
</div> 

.relativeDiv 
{ 
    height: 100%; 
    width: 100%; 
    /* You may need some negative margin 
     if there's a padding on the table cell */ 
    position: relative; 
} 

#innerDiv 
{ 
    position: absolute; 
    /* You're now free to set the top and left attributes freely */ 
} 

對於進一步閱讀：

• http://css-tricks.com/absolutely-position-element-within-a-table-cell/

• Does Firefox support position: relative on table elements?

Answer 2

你應該在外層div使用位置屬性顯式（如：相對的，fiexd，絕對）

div { 
    position: relative; 
}; 

#innerDiv { 
    position: absolute; 
    left: 10px; 
}