Question

我觉得这应该是没脑子的，但显然我错过了一些东西......

我坚持在页面上使用HTML表格，并且需要绝对定位在表格内部呈现的元素，以便在我们应用DHTML来显示它时它可以正确显示。

我尝试将其相对于表格行的底部进行绝对定位，但浏览器（FF和IE）不会相对于行呈现它。相反，它相对于具有相对定位的行上方的下一个父项进行定位。

基本上是：

<table>
<tr class="aRelativelyPositionedClass">
    <td>
         <div class="anAbsolutelyPositionedClass">stuff I want to absolutely position</div>
    </td>
</tr>
</table>

是否可以将内部div相对于行定位？或者表格中是否存在HTML问题？

Answer 1

根据相对的http://www.w3.org/TR/CSS2/visuren.html#choose-position讨论：“'position：relative'对 table-row-group，table-header-group，table-footer-group的影响， table-row ，table-column-group，table-column，table-cell和table-caption元素未定义。“

问题在于Firefox，谷歌Chrome，Opera和Safari选择了位置：相对于表行没有任何作用。恕我直言，他们应该已经实现了引用框架的更改，以便绝对定位的子元素将相对于表格行呈现，但它们没有。

我需要在JavaScript中绝对定位元素，所以我有一个简单的解决方案。如果元素的显示是表格行，则将其更改为块，然后设置位置：相对。我意识到，如果您尝试使用HTML和CSS完成所有操作，这对您没有帮助。但在我的情况下，设置display：block before position：relative working。

Answer 2

如果除了你想要定位的div之外，表格单元格中没有其他内容，当你使用绝对定位将div移出流程时，它可能会折叠为零维度，这就是你的计算结果。在行或单元格上是否设置了明确的高度？

编辑：我认为Guffa是正确的。由于单元格中只有一个div，我无法将其相对于行或单元格定位。我想你可以通过添加一些标记来伪造你正在寻找的效果：

<table border="1">
    <tr style="position:relative;">
        <td><img src="http://sstatic.net/so/img/so/logo.png" height="61px" width="250px" alt=""/></td>
        <td>
            <div style="position: relative; height: 100px; width: 100px;">
                <div style="border: 1px solid red; position: absolute; bottom: -10px; left -10px;">Position me</div>
            </div>
        </td>
    </tr>
</table>

Answer 3

我不认为您可以相对于行定位它，因为该行实际上不是可见元素。

您应该能够通过在单元格上设置样式position:relative使其成为图层来相对于单元格定位它。单元格仍然不是一个独立的元素，所以你可能不得不在单元格中添加另一个div，而是使它成为一个层，以使其正常工作。

（当你将它与其他技术结合使用时，表格会有问题...也许你应该考虑删除表格altogehter ...）

Answer 4

CSS 2.1 Specification：

'position：relative'的效果 table-row-group，table-header-group，桌脚组，桌排， table-column-group，table-column， table-cell和table-caption元素未定义。

因此，浏览器会回退到其行为被视为已定义的下一个父级：table。

一种解决方案是强制这些行显示为块：

tr.aRelativelyPositionedClass {
    display: block;
}

Answer 5

尝试使用CSS

.aRelativelyPositionedClass td {
   // your style 
}

我相信你也必须明确说明亲属。

Answer 6

将其粘贴到文件中，看看它是如何完成的。

请记住设置容器的大小。我在这里用HTML做了以保持示例简短，但你应该在CSS中做到这一点。

<table border="1" width="500">
<tr height="200">
    <td>
         <div style="position:relative;top:20;left:20">stuff I want to position</div>
         <div style="position:relative;top:30;left:30">stuff I want to position</div>
         <div style="position:relative;top:40;left:40">stuff I want to position</div>
         <div style="position:relative;top:50;left:50">stuff I want to position</div>
    </td>
</tr>
<tr height="200">
    <td>
         <div style="position:relative;top:20;left:20">stuff I want to position</div>
         <div style="position:relative;top:30;left:30">stuff I want to position</div>
         <div style="position:relative;top:40;left:40">stuff I want to position</div>
         <div style="position:relative;top:50;left:50">stuff I want to position</div>
    </td>
</tr>
</table>

Answer 7

解决方案非常简单：将DIV位置=相对，立即放在TD内。

TR和TD元素不支持设置“位置” - 因此它们无法正确设置为“position = relative”，成为您定位的容器。

这是CSS规范＆amp;浏览器使用特殊的CSS位置值来实现行和放大器。表的细胞行为。

<td>
  <div style='position:relative;'>  <!-- relative container for positioning -->
    <!-- DIVs to be positioned, go in here. -->
  </div>

另见： Using Position Relative/Absolute within a TD?

CSS定位在HTML表格中

7 个答案: