css - 将图层放置在两行上，没有偏移

Question

如何在不向下移动页面的情况下将 Logo 分层，使其与第二行重叠？我正在使用 Foundation 框架 http://foundation.zurb.com/对于一个动态网站。 Foundation 使用行，我想设置两行:

• 第一行:包含 Logo
• 第二行:包含一张图片(准确地说是一个 slider )

我希望第一行中的 Logo 与第二行重叠，但是当我尝试这样做时，它会在顶部创建一个“填充”或空间，我希望 Logo 紧贴屏幕顶部。

这是我用于 Logo 的 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; }

我正在尝试在不“破坏”动态网格的情况下执行此操作。

需要注意的一点是，第二行是一个“ slider ”，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> 

解决方案:

终于弄明白了:关键是将我试图叠加的图像放在与 slider 同一行的“ slider ”顶部，然后使用 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;
    }   

Answer 1

从您的 HTML 中，目前您在 .row 中有一个 .row，如果可以，那么

  .orbit-wrapper // should be encapsulating your #slider

如果这不行，您应该关闭第一个 .row div，然后通过在它们之间添加一个 neigboor ~ 来更正 css 选择器:

  .row ~ .row

这样您就可以控制第一个和下一个。