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

Question

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

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

该 div 的计算样式如下:

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

在此希望更有经验的 CSS 和 Gmail 用户可以查看 Gmail DOM 树并向我解释这一点。干杯!

Answer 1

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

在普通的 javascript 中:

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

在 jQuery 中:

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

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