巧妙解决固定导航栏遮挡页面内容
在网页设计中，我们常常使用position: fixed属性创建始终停留在页面顶部的导航栏。然而，这可能会导致导航栏遮挡下方内容。本文提供一种简单有效的解决方案，并附带代码示例。
问题：固定导航栏遮挡下层内容
如下HTML代码片段展示了一个带有红色固定导航栏的页面：
固定导航栏遮挡问题
测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容
由于导航栏使用了position: fixed，它脱离文档流，始终位于页面顶部，导致下方内容被遮挡。
解决方案：巧妙运用margin-top或padding-top
解决方法是为页面主体内容添加margin-top或padding-top属性，其值等于导航栏高度（本例中为50px）。这将使页面内容向下偏移，避免被导航栏遮挡。 例如，将页面内容包裹在一个div中，并添加margin-top: 50px;样式。
这种方法简单有效，确保所有内容完整显示。 修改后的HTML代码如下：
固定导航栏遮挡问题
测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容
通过以上方法，即可轻松解决固定定位导航栏遮挡页面内容的问题。
