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 */
}

进一步阅读：

Answer 2

您应该在外部div中明确使用position属性（例如：relative，fixed，absolute）

div {
  position: relative;
};

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

在div中定位div

2 个答案: