HTML与CSS开发网页时导航栏及布局3个异常问题求解决方案

问题2：导航栏相对body区域而非视口右浮动 #

• 原因：首先你的HTML存在语法错误，所有页面可见内容必须放在<body>标签内部，浏览器解析时会自动把你写在body外的<header>、#logospace元素挪到body内部，加上你给body设置了width: 80%，导航作为body的子元素自然只会相对于80%宽度的body浮动。
• 解决方案：
  1. 先修正HTML结构，把<header>、#logospace都放到<body>标签的最开头位置
  2. 若要导航相对于整个视口右对齐，修改#navbar的定位规则，替换原来的float配置：

#navbar {
  position: fixed; /* 如果不需要导航固定在顶部不跟随滚动，改成absolute即可 */
  top: 3em;
  right: 3em;
  display: flex;
}

问题3：页面主体显示在导航栏上方 #

• 原因：第一是HTML结构错误导致浏览器渲染顺序异常，第二是导航使用浮动/固定定位后脱离了正常文档流，后面的主体内容没有做位置避让就会和导航重叠。
• 解决方案：
  1. 修正HTML结构后，给主体内容容器添加清除浮动配置，同时设置足够的上 margin 避让导航：

#main-content-wrapper {
  clear: both;
  margin-top: 10em; /* 可根据导航实际高度调整数值 */
  width: 100%;
  height: 100%;
  background: #00f100;
}

如果你用了fixed定位导航，必须保留上margin配置，避免内容被导航遮挡。

内容的提问来源于stack exchange，提问作者Ph1l