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

Question

这是场景。

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

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

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

Answer 1

对于你的问题的答案将取决于你想要完成的事情而变化很大。大多数毯解决方案要求：

• 增加额外的定位元素（使用Javascript往往添加）
• 在TH, TD元素（常使TABLE行为不正常）

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

那一边找到...

如果您使用的是TABLE站点布局，现在停止和重新思考你的人生选择。有更好的选择：

• 最好的选择将是CSS3 Flexible Box Layout模型，如果当它变得广泛支持。在写这篇文章的时候支持是最小的，分散的，而并不总是遵循相同的标准（caniuse.com: flexbox）
• 直到变成一种选择，这是一个鲜为人知的事实，绝对定位的元素可以定位里面绝对定位的元素。请参阅this fiddle了解绝对定位元素可实现100％宽度/高度布局的示例。或者，可以在相对定位的父元素内制作相同的布局。

如果您没有使用TABLE进行网站布局，那么可能有其他选择对您开放。这取决于预期的效果。