无偏移两行的位置图层

如何对一个徽标进行分层，使其与第二行重叠而不会将页面向下移动？我使用基础框架http://foundation.zurb.com/作为动态网站。基金会采用行，我想设置两行：无偏移两行的位置图层

行的一个：包含一个标志
连续两个：包含一个图像（滑块来准确）

我想要的标志在第一行与第二行重叠，但是当我尝试这样做时，它会在顶部创建一个“填充”或空格，并且我希望徽标坐在屏幕的顶部。

下面是我使用为标志的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>

SOLUTION：

终于想通了：关键是把我试图层上的同一行滑块在“滑块”的顶部，然后用浮动图像：离开了。下面是最终的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; 
    }

来源

2012-11-26 user1853448

从你的HTML，此刻你有一个.row里面.row，如果这是确定的，那么

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

如果这样不行，应该关闭第一个.row div，然后更正css selecto rs加入neigboor〜他们之间：

.row ~ .row

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

来源

2012-11-26 14:37:37 jonBreizh

好的，我纠正了HTML - 这是两行，我应该关闭第一行。但问题并未解决 - 似乎发生的情况是，行高是通过测量徽标的高度来计算的，因此即使徽标向下移动到第二行顶部的层，它仍然留下一个大的标志顶部的空白部分，因为该行在框架中某处继承了其高度。我会继续摆弄它，也许我误解了你用封装封装的意思。 – user1853448

http://jsfiddle.net/8MjSx/你能用图像网址来完成这个小提琴吗？ – jonBreizh

在底部的'问题'部分添加了答案。

来源

2012-11-27 13:25:28 user1853448

无偏移两行的位置图层

回答

相关问题