相对定位的块元素会影响其父级的大小

Question

描述问题的最佳方式是发布jsFiddle，here it is。

截图供参考：

我必须在div元素中放置一个td，其中包含一些格式和高度。 div不能破坏单元格的高度，但它本身比单元格内的line-height大一点，所以整行的高度都会上升。它可以看作截图上下表之间的高度差异。

相对定位div并向上移动它无济于事。我的问题是 - 是否有可能以某种方式将div置于与我的示例完全相同的位置但不影响表格行的高度？

绝对定位按预期工作但有一些缺陷 - 表的内容和我的页面的其他元素可能会发生变化，因此保持div的正确位置需要使用JavaScript监视它的父级是一个非常实用的解决方案。

感谢大家的帮助。

Answer 1

相对定位对布局没有影响，仅对您定位的事物的位置有影响。这就是它的工作原理。

好消息是你可以给出相对于它所在的表格单元格的绝对位置。如果你使用了一个技巧。见http://css-tricks.com/absolutely-position-element-within-a-table-cell/

Answer 2

您可以通过将div包裹在表格单元格内，并使用相对定位的另一个div来实现您正在寻找的效果。然后将div更改为绝对定位。

出于某种原因，jsFiddle现在没有为我加载，所以这是代码。

<强> HTML

<table class="some-table">
    <tr>
        <td>Cell 1</td>
        <td>
            Cell 2
            <div class="wrapper">
                <div class="checkbox-div">
                    <input type="checkbox" id="checkbox"/>
                    <label for="checkbox">Label</label>
                </div>
            </div>
        </td>
        <td>Cell 3</td>
    </tr>
</table>
<br/>
<br/>
<table class="some-table">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</table>

<强> CSS

.some-table td {
    border: 1px solid black;
    padding: 5px;
    width: 200px;
    font-size: 10px;
}

.wrapper {
    position: relative;
    float: right;
    width: 200px;
}

.checkbox-div {
    border: 1px solid black;
    position: absolute;
    top: -20px;
    right: 0;
}

Answer 3

在你的情况下总会有高度差异，因为cehck框只是高于文本，所以它需要更多的空间，这会导致更高的元素

如果你删除位置：relative和padding，你会看到，该复选框高出2-4个像素