防止两个位置绝对元素发生碰撞

Question

我在这里创建了一个我的网站的模拟，我们在屏幕上有两个元素。一个标志和一个表格。

两者都是绝对定位的，但在较小的屏幕上，它们最终会发生碰撞（或大部分碰撞）。我知道无法在具有 position: absolute 的元素上创建“边距顶部”，那么在较小的屏幕上查看时，如何在这两个元素之间放置空间（允许滚动）？

这是供您查看的 codepen 链接。我已在此处提供了尽可能多的信息：https://codepen.io/riza-khan/pen/VwPrXzo?editors=1100

当屏幕很小时，它们几乎发生碰撞（现场版更严重）。

Answer 1

您不应该将这些视为绝对的，它们应该是相对的，然后一旦您再次将它们排列起来，您就可以为图像设置 padding-bottom: 10px; 之类的内容

Answer 2

绝对定位元素被设置为“相对”于根 (html, body) 标签，除非父元素具有 position: relative 的 css 属性，在这种情况下，它们与该父元素“相对”。

我这样说是因为，如果你在相对组件（在这种情况下是主体）上设置一个最小高度，无论元素有多高，绝对位置都保持不变。因此，没有元素最终会发生碰撞。

这个特定示例的修复非常简单。