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

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