奇怪的白色间隙和水平滚动问题

Question

我似乎正在处理我正在进行的设计问题。我正在使用kickstart HTML框架，但我有几个问题。

首先，我的页面顶部（徽标，导航栏）与文本之间存在非常大的空白。

其次，我尝试使用z-index将徽标覆盖在导航栏上。但是它会导致负水平滚动。我试图通过隐藏overflow-x来隐藏它，但它似乎不是最好的解决方案。

您可以在http://jkr.me.uk/problem.html

查看问题

谢谢，

约翰

Answer 1

在徽标上使用position：relative会占用你正在考虑的空间。

相反，使用float：right，或者将其放置在position：absolute;

Answer 2

白色差距的问题是图像。如果禁用position:relative属性，则图像底部将触及第一个标头标记的上边距。对此的脏修复方法类似于第一个标题上的margin-top: -200px或徽标图像上的margin-bottom: -200px。您也可以使用上一个回答者的方法。

对于覆盖导航栏的徽标图像，Chrome和IE 9都适用于我。