Gmail 如何防止使用绝对定位的元素重叠？

Question

我最近开始了学习 CSS 的旅程，并且一直在研究 Gmail 的设计，因为我一直对 Gmail 的工作原理感到好奇。

我似乎无法弄清楚的一个问题是，Gmail 是如何让一个绝对定位的 div 表现得好像它仍然是流程的一部分。这是我指的 div：

该 div 的计算样式如下：

问题是，当浏览器宽度减小时，我认为这个绝对定位的 div 会直接与左侧的搜索表单重叠。相反，它似乎压缩了搜索表单，就好像它仍然是流程的一部分。我检查了搜索表单和它周围的其他元素，寻找可能阻止它重叠的边距或填充，但我未经训练的眼睛什么也没发现。

希望更有经验的 CSS 和 Gmail 用户能够查看 Gmail DOM 树并向我解释这一点。 干杯！

Answer 1

您可以为此使用 javascript。您可以绑定到窗口对象的 resize 事件，并在调整浏览器大小时重新计算和重新定位元素。

在纯javascript中：

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

在 jQuery 中：

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

另一种选择是在绝对定位元素周围的容器上设置一个 position:relative。如果该相对容器随浏览器窗口调整大小，则其中的绝对容器将随之移动。