html - 在 CSS 中使用 fixed 重叠

Question

我正在本地处理我的网站，因此无法显示它。我已修复 (position: fixed;) 我的 header ，其中包含我的 Logo 和菜单(“ header ”)。我这样做的原因是因为我希望标题在用户向下滚动网站时与用户保持一致。

在整个 CSS 中，我没有使用 px，而是使用 100% 作为宽度，使用 auto 作为我的高度。我发现当在不同的显示器尺寸和屏幕尺寸上查看网站时，自动是最好的解决方案，因为它会拉伸(stretch)或变小。

但是，由于我已将页眉设置为固定，所以我现在遇到的唯一问题是当屏幕变小时，页眉开始与图像和文本重叠。由于标题是黑色的，文本和图像开始“消失”。

阅读和测试后，CSS 中的“固定”显然是导致问题的原因，因为无论屏幕尺寸如何，该部分都保持固定。

任何人都可以帮助我并推荐最好的行动方案是什么，以便我的标题保持“固定”，以便它保留在用户手中，并且当屏幕尺寸变小时，它不会导致任何重叠问题？

Answer 1

解决方案是为后续内容添加一个 padding-top。假设您的 header 高度为 100 像素，则包含内容的容器应具有 padding-top:100px。没有这个也应该与更大尺寸的内容重叠，如果它只发生在较小的屏幕尺寸上，则可能存在其他问题。尝试创建一个 JSFiddle 来复制这个问题。