使用父母寬度的絕對定位元素

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進行網站佈局，那麼可能有其他選擇對您開放。這取決於預期的效果。