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
});

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