父母宽度的绝对定位元素

Question

这就是情景。

我有一个带有标题行的简单表，其中包含多个具有动态变化宽度的列。在头行中有一个高于头行高度的高度列表，但是它们只能在悬停时看到，但是在悬停时它们应该在头部的顶部但仍然具有原始的100父级的％宽度是列的<td>元素。

我所做的是在悬停时设置position: absolute但是只要发生这种情况，元素显然会占用它可以获得的所有宽度，只能通过特定应用的宽度进行修复，但这并不能帮助我列可以调整大小。

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

Answer 1

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

• 添加额外的定位元素（通常使用Javascript添加）
• 在display: block;元素上设置TH, TD（通常会导致TABLE行为不正常）

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

找到

除此之外......

如果您使用TABLE进行网站布局，立即停止并重新思考您的生活选择。有更好的选择：

• 最佳选项是CSS3 Flexible Box Layout模型，如果它得到广泛支持的话。撰写本文时的支持是最小的，分散的，并不总是遵循相同的标准（caniuse.com: flexbox）
• 直到成为一个选项，一个鲜为人知的事实是，绝对定位的元素可以定位在绝对定位的元素内。有关使用绝对定位元素实现100％宽度/高度布局的示例，请参阅this fiddle。或者，可以在相对定位的父元素内部进行相同的布局。

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