html - 在 div 中定位 div

Question

我有以下 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 中试试这个）。

如果这是您在特定情况下执行操作的唯一方法，请在单元格内添加一个相对定位的包装器 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/

• Firefox 是否支持 position: relative 在表格元素上？

Answer 2

应该在外层 div 中显式使用 position 属性（如：relative,fiexd,absolute）

div {
  position: relative;
};

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