如何分层徽标以使其与第二行重叠而不向下移动页面？我将 Foundation 框架http://foundation.zurb.com/用于动态站点。Foundation 使用行，我想设置两行：
- 第一行：包含一个标志
- 第二行：包含一个图像（确切地说是一个滑块）
我希望第一行的徽标与第二行重叠，但是当我尝试这样做时，它会在顶部创建一个“填充”或空间，我希望徽标紧贴屏幕顶部。
这是我用于徽标的 CSS：
.logo {
position: relative;
top: 150px;
left: 50px;
z-index: 10;
}
基金会“网格”的CSS：
.row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 0px; }
.row.collapse .column, .row.collapse .columns { padding: 5px; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.row .row.collapse { margin: 0; }
.column, .columns { float: left; min-height: 1px; padding: 0 3px; position: relative; }
.column.centered, .columns.centered { float: none; margin: 0 auto; }
我试图在不“破坏”动态网格的情况下做到这一点。
需要注意的一点是，第二行是“滑块”，CSS 提供以下内容作为“包装器”，但不确定如何使用它：
.orbit-wrapper { width: 1px; height: 1px; position: relative; }
最后，这是 HTML：
<div class="row">
<div class="twelve columns">
<img src="images/logo-200.png"; class="logo";>
</div>
<div class="row">
<div class="twelve columns">
<div id="slider">
<img src="images/Main.png" =[img 1]" />
<img src="images/Main-2.png" =[img 2]" />
<img src="images/Main-4.png" =[img 3]" />
<img src="images/Main-5.png" =[img 4]" />
</div>
</div>
</div>
解决方案：
终于弄明白了：关键是将我试图叠加的图像放在与滑块同一行的“滑块”顶部，然后使用 float:left。这是最终的 HTML：
<div class="row">
<div class="twelve columns">
<div style="float:left;">
<img src="images/logo-200.png"; class="logo";>
</div>
<div id="slider">
<img src="images/Main-01.png" =[img 1]" />
<img src="images/Main-01.png" =[img 2]" />
<img src="images/Main-01.png" =[img 3]" />
<img src="images/Main-01.png" =[img 4]" />
</div>
和CSS：
.logo {
position: absolute;
float: left;
left: 20px;
top: -90px;
z-index: 10;
}