内部CSS导航栏样式显示在页面顶部的问题排查与修复

CSS代码直接显示在页面顶部的核心原因是HTML标签被转义为实体字符：当前代码里所有尖括号<>都被替换成了<和>实体，浏览器无法识别<style>为样式标签，会直接把标签内部的CSS代码当成普通文本渲染。
这个问题完全匹配你观察到的加载表现：页面初始加载时bootstrap、fontawesome等外部CSS还在请求阶段，等解析到这段被转义的内容时，外部资源加载刚好推进到对应位置，CSS文本就会突然渲染到页面顶部。
另外CSS本身存在一处会引发布局错乱的错误：给body设置了display: inline，行内元素无法正常承载块级导航栏结构，就算标签转义问题修复，页面布局也会出现异常。
由于你的页面是PHP后缀，大概率是动态渲染时误调用了htmlspecialchars()/htmlentities()这类转义函数，把整段HTML做了实体转义后输出才引发问题。

• 检查实际运行的HTML/PHP文件，把所有被转义的标签实体改回正常尖括号格式，重点确认<style>、</style>以及导航栏相关的<nav>、<ul>、<li>等标签都用正常<>包裹，不存在</>转义字符。PHP动态渲染场景下，直接删掉对整段HTML代码多余的转义函数调用即可。
• 修正body样式的错误配置，删除display: inline;这行引发布局问题的代码，同时把overflow: hidden改为overflow-x: hidden，避免纵向滚动条被强制隐藏。修正后的body样式参考：

body{
  font-family: sans-serif;
  overflow-x: hidden;
  user-select: none;
}

注：通配符选择器*已经全局重置了margin、padding，无需在body里重复设置这两个属性。

• 核对外部CSS资源路径，确认layout/css/bootstrap.min.css、layout/css/fontawesome.min.css的文件路径和实际存放位置一致，避免资源加载失败引发额外解析异常。

异常效果参考：

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