Gmail如何防止使用絕對定位的元素髮生重疊？

Question

我最近開始了我學習CSS的旅程，並一直在研究Gmail的設計，因爲我一直對Gmail的工作原理感到好奇。

我似乎無法弄清楚的一個問題就是，Gmail似乎如何獲得絕對定位的div，它仍然是流程的一部分。下面是我指到div：

該分區的計算樣式如下：

的問題是，當瀏覽器寬度減小，我認爲這絕對定位div將直接在搜索表單的左側與搜索表單重疊。相反，它似乎壓縮了搜索表單，好像它仍然是流程的一部分。我檢查了搜索表單和其周圍的其他元素，尋找可能的邊緣或填充物，以防止它們重疊，但是我的未經訓練的眼睛沒有發現任何東西。

這裏希望更有經驗的CSS和Gmail用戶可以看一下Gmail DOM樹並向我解釋這一點。 乾杯！

Answer 1

你可以使用JavaScript。您可以綁定到窗口對象的resize事件，並在瀏覽器調整大小時重新計算和重新定位元素。

在普通的JavaScript：

window.onresize = function(event) { 
    // recalculate 
}; 

在jQuery中：

$(window).resize(function(event) { 
    // recalculate 
}); 

另一種選擇是有一個位置：圍繞所述絕對定位元素在容器上相對的。如果該相對容器使用瀏覽器窗口調整大小，那麼其中的絕對容器將隨之移動。