绝对定位在表内 [英] absolute positioning inside a table

问题描述

我需要在td中使用绝对定位来定位东西。为了避免一个事实，td是未定义的，当它设置为相对，我使用一个div设置为相对内我的td然后在内部的div我有一个内部div设置为绝对。这一切都很好，当我有内容填满td。当我设置td的内容显示无，然后绝对定位得到所有拧紧。

I need to position something with absolute positioning inside a td. To get around the fact that a td is undefined when setting it to relative, I use a div set to relative inside my td then inside that div I have an inner div set to absolute. This all works great when I have content filling up the td. When I set the content of the td to display none then the absolute positioning gets all screwed up.

有人知道为什么会这样。

Does anyone know why this would be.

HTML：

<table>
    <tr>
        <td>
            <div class="relative">
                <div class='absolute'>
                    <p>A</p>
                </div>
            </div>
            <div class="slot"></div>
            <div class="slot"></div>
        </td>
        <td>
          <div class="relative">
             <div class='absolute'>
               <p>B</p>
           </div>
           </div>
           <div class="slot hidden"></div>
           <div class="slot"></div>
        </td>
    </tr>
</table>

和CSS：

td{
    border:1px solid red;
    width:100px;
    height:60px;
    vertical-align:bottom;
}

.slot{
  width:100px;
  height:29px;
  background-color:#999;
  border:1px dashed blue;
}

.relative{
    position:relative;
}

.absolute{
    position:absolute;
    top:5px;
    left:5px;
}
.hidden{
    display:none;
}

还有活动版本： http://jsfiddle.net/HgEtQ/

在上面的小节中，您可以看到第一个表细胞工作正常。绝对定位的div在正确的空间。第二个隐藏了顶部插槽，现在绝对定位不在左上角。如果你拿出两个插槽，那么它真的拧紧了绝对定位。我需要定位它是绝对的，因为一些元素将根据元素而移动。

In the fiddle above you can see the first table cell works correctly. The absolutely positioned div is in the correct space. The second one has hidden the top slot and now the absolute positioning is not in the top left corner anymore. If you take out both slots then it really screws up the absolute positioning. I need to positioning it absolute because some of the elements will be shifted depending on the element.

推荐答案

这里有几件事情。

具有：

td {
    /*...*/
    vertical-align:bottom;
}

这将把单元格的内容推到底部。

That will push the content of the cells to the bottom.

此外，绝对定位的元素是从正常流程中删除，因此不会影响其父级的高度：

Also, an absolutely positioned element is removed from the normal flow so it won't contribute to its parent's height:

完全（它对后来的兄弟姐妹没有影响）。一个绝对定位的盒子为正常流的孩子和绝对（但不是固定的）定位后代建立一个新的包含块。

It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants.

表示您的 div.relative 元素的高度为零，但它们仍然具有左上角，因此您的绝对定位偏移位于某处。

In particular, this means that your div.relative elements have a height of zero but they will still have an upper left corner so your absolute positioning offsets are anchored somewhere.

然后你有< div class =slot hidden> 和 hidden 从布局中移除< div> ，因此您实际上只有这样：

Then you have <div class="slot hidden"> and the hidden removes the <div> from the layout so you effectively have just this:

<div class="relative"></div> <!-- Height zero -->
<div class="slot"></div>     <!-- Height 29px -->

与 vertical-align：bottom 表示您的第二个 div.absolute 将位于 div.slot 顶部的5px，即25px

That combined with the vertical-align: bottom means that your second div.absolute will be positioned 5px from the top of the div.slot and that is 25px from the bottom of the table cell.

第一个单元格工作正常，因为两个可见的 div.slot 元素 div.relative 右边的单元格的顶部，那么 div.absolute 位于从顶部5px div.relative ，并且距表格单元格顶部5px。

The first cell works fine because the two visible div.slot elements push the div.relative right to the top of the cell, then the div.absolute is positioned 5px from the top of the div.relative and that is 5px from the top of the table cell.

不幸的是， $ c> position：relative 到< td> 是一个有点诡异的浏览器，所以你需要一些hackery您的定位权，同时保持 vertical-align：bottom 。您可以这样重新组织< td> ：

Unfortunately, adding position: relative to a <td> is a bit dodgy as far as browsers go so you'll need some hackery to get your positioning right while keeping vertical-align: bottom. You could re-structure the <td>s like this:

<td>
    <div class="relative">
        <div class='absolute'>
            <p>A</p>
        </div>
    </div>
    <div class="nonsense">
        <div class="slot"></div>
        <div class="slot"></div>
    </div>
</td>

CSS类似这样：

td{
    border:1px solid red;
    width:100px;
    height:60px;
    vertical-align: top;
}

.slot{
    width:100px;
    height:29px;
    background-color:#999;
    border:1px dashed blue;
}

.relative {
    position:relative;
}
.nonsense {
    height: 62px; /* td[height] + 2 for the borders */
    display: table-cell;
    vertical-align: bottom;
}

.absolute{
    position:absolute;
    top:5px;
    left:5px;
}
.hidden{
    display:none;
}

实例： http://jsfiddle.net/ambiguous/aV4nT/

或者您可以使用 visibility：hidden ：

Or you could use visibility: hidden:

隐藏

生成的框不可见（完全透明， ，但仍然影响布局。此外，如果元素的后代具有visibility：visible，则其后代将可见。

hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

而不是

.hidden {
    visibility: hidden;
}

这将留下 div.slot 元素占用空间和影响布局，但只有第二个将被看到。

This will leave both div.slot elements taking up space and affecting the layout but only the second one will be seen.

Live example： http://jsfiddle.net/ambiguous/RcdNh/

Live example: http://jsfiddle.net/ambiguous/RcdNh/

这篇关于绝对定位在表内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！