Html 浮动元素的奇怪行为，这些元素似乎具有相对位置

我正在阅读一本关于响应式网页设计的书，其中作者在以下地址创建了网页：

由于该网页具有响应性，如果您在浏览器屏幕宽度大于1025px的情况下查看该网页，您可以看到带有class徽标的h1元素位于带有classes nav和nav bar（ul是导航条）的无序列表的顶部

请参阅下面的链接到Chrome Developer Tools中的网页截图，以了解我所指的示例

ul，在Chrome开发者工具中突出显示nav和nav主要类：

如上图所示，组成导航菜单栏的无序列表位于h1徽标元素下方。您可以访问该网站，在浏览器中打开它并亲自查看

现在有了背景资料，我的问题来了

带有logo类的h1元素如何能够位于带有nav和nav主类的ul之上

就我的理解而言，为了做到这一点，您通常必须将无序列表的位置设置为绝对（两个元素都向左浮动），但在Chrome Developer工具中检查时，上述两个元素的位置都设置为相对

---

我不能以造物主创造它的方式复制它。我在这里遗漏了什么或不理解什么？

为了得到一个z索引，logo元素尤其是相对定位的，如果徽标的z索引高于导航栏的z索引，那么它似乎是在它上面分层的。

在使用html和css之后，我发现带有类徽标的h1元素在css中向左浮动，而旁边带有类导航栏的div元素没有浮动，因此具有100%的属性包含元素的宽度，因此能够将h1元素占用的区域与class徽标重叠。

我知道z索引允许徽标显示在顶部。这不是我正在努力解决的问题。我不明白的是，当徽标（h1元素带有类徽标）和导航条（ul带有class.nav和.nav primary）看起来都有相对定位时，甚至可能存在任何重叠（即，导航条应该在徽标的左侧浮动，因为两者都有相对定位）。