html - 使用父宽度的绝对定位元素

Question

这是场景。

我有一个带有标题行的简单表格，其中包含几列宽度动态变化的列。在头行中有一个比头行高度长的高度列表，但是它们只应该在悬停时可见，但是当悬停时它们应该在头行之上但仍然具有原始的 100父级的 % 宽度为 <td>列的元素。

我所做的是设置position: absolute在悬停时，但一旦发生这种情况，元素显然就占据了它可以获得的所有宽度，只能使用特定应用的宽度进行修复，但这并不能真正帮助我，因为可以调整列的大小。

我的问题是，在 CSS(不是 Javascript)中是否有一种方法可以实现元素仍然使用父级宽度的行为。

Answer 1

根据您要完成的任务，您的问题的答案会有很大差异。大多数一揽子解决方案需要:

• 添加额外的定位元素(通常使用 Javascript 添加)
• 在 TH, TD 元素上设置 display: block;(通常会使 TABLE 行为不稳定)

这样做的原因是向表格单元格添加定位会将其从流中移除，这会影响表格对齐(请参阅 this bug report comment )。关于这个问题的更长时间的讨论和可能的解决方案可以在 Does Firefox support position: relative on table elements? 找到。

除此之外......

如果您正在使用 TABLE 进行网站布局，现在停止并重新考虑您的生活选择。有更好的选择:

• 最好的选择是 CSS3 Flexible Box Layout模型，如果以及何时得到广泛支持。在撰写本文时，支持很少、分散，并且并不总是遵循相同的标准 (caniuse.com: flexbox)
• 在这成为一个选项之前，一个鲜为人知的事实是绝对定位元素可以定位在绝对定位元素内。参见 this fiddle例如，使用绝对定位的元素可以实现 100% 宽度/高度的布局。或者，可以在相对定位的父元素内进行相同的布局。

如果您没有使用 TABLE 进行网站布局，那么可能还有其他选项可供您选择。这取决于所需的效果。