浮动元素的奇怪行为似乎具有相对定位

Question

我正在阅读一本关于响应式网页设计的书，其中作者在以下地址构建网页：http://responsivewebdesign.com/robot/

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

请参阅以下指向Chrome Developer Tools网页截图的链接，以获取我的意思。

ul，Chrome开发者工具中突出显示了nav和nav-primary类：

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

现在提供的背景信息是我的问题。

带有徽标类的h1元素如何能够通过nav和nav-primary类位于ul的顶部？

就我的理解而言，你通常必须将无序列表的位置设置为绝对才能执行此操作（两者都向左浮动），但在Chrome开发者工具中检查时，上述两个元素都有位置设置为相对。

我不能以创建者创建它的方式复制它。我在这里缺少什么或不理解？

Answer 1

特别是徽标元素是相对定位的，以便获得z-index，如果徽标的z-index高于导航栏的z-index，那么它似乎会在它上面分层。

Answer 2

在玩了html和css之后，我发现带有类标识的h1元素在css中浮动到左边，而div元素与类导航条一起放在它上面没有浮动，因此有100包含元素宽度的百分比，因此能够重叠h1元素占用的带有类标识的区域。