我最近开始了学习CSS的旅程,一直在研究Gmail的设计,因为我一直对Gmail的工作方式很好奇。
一个我似乎不明白的问题是,Gmail是如何让一个绝对定位的div看起来仍然是流程的一部分。这是我指的div:
该div的计算样式如下:
问题是,当浏览器宽度减小时,我认为这个绝对定位的div将直接与它左边的搜索表单重叠。相反,它似乎压缩了搜索表单,好像它仍然是流程的一部分。我检查了搜索表单和它周围的其他元素,寻找可能使它不重叠的边距或填充,但我未经训练的眼睛没有发现任何东西。
希望一个更有经验的CSS和Gmail用户可以看看Gmail DOM树并向我解释一下。
干杯!

最佳答案

你可以用javascript来实现。可以绑定到窗口对象的“调整大小”事件,并在调整浏览器大小时重新计算和重新定位元素。
在纯javascript中:

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

在jQuery中:
$(window).resize(function(event) {
    // recalculate
});

另一个选择是有一个位置:相对容器上的绝对定位元素。如果相对容器随浏览器窗口调整大小,则其中的绝对容器将随之移动。

关于html - Gmail如何防止使用绝对定位的元素重叠?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10200890/

10-10 14:13
查看更多