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

Question

这就是场景。

我有一个带有标题行的简单表格，其中包括几列具有动态变化的宽度。在头排内有一个比头排高度长的高度列表，但是它们应该只在悬停时可见，但是在悬停时它们应该在头排的顶部但仍然具有原始的 100父<td>元素的百分比宽度是列的元素。

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

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

Answer 1

根据您要完成的工作，您的问题的答案会有很大差异。大多数毯子解决方案需要：

• 添加额外的定位元素（通常使用 Javascript 添加）
• 设置元素（通常会使display: block;行为不规律）TH, TDTABLE

原因是向表格单元格添加定位会将其从流程中移除，这会影响表格对齐（请参阅此错误报告评论）。关于这个问题和可能的解决方案的更长时间的讨论可以在Firefox 是否支持位置：相对于表格元素？

除此之外……</p>

如果您正在使用TABLEfor 站点布局，请立即停止并重新考虑您在生活中的选择。有更好的选择：

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

如果您没有使用TABLEfor 站点布局，则可能还有其他选项可供您使用。这取决于所需的效果。