오프셋이없는 두 행의 위치 레이어

Question

페이지를 이동하지 않고 두 번째 행과 겹치게 로고를 어떻게 레이어합니까? 동적 사이트에 Foundation 프레임 워크 http://foundation.zurb.com/을 사용하고 있습니다. 재단은 행을 사용하고 난 두 행 설정하려는 :

• ROW ONE : 이미지 (슬라이더가 정확하기)를 포함

내가 로고를 원하는 : 로고

ROW 두를 포함합니다 행 2를 겹치기 위해 1 행에 있지만, 그렇게하려고 할 때 화면 상단에 '패딩'또는 스페이스가 생겨서 로고가 꽉 조여 지도록하고 싶습니다. '파괴'없이

.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; } 

나는이 작업을 수행하기 위해 노력하고있어 : 재단 "그리드"에 대한

.logo { 
    position: relative; 
    top: 150px; 
    left: 50px; 
    z-index: 10; 
    } 

그리고 CSS : 여기

내가 로고를 사용하고있어 CSS의 동적 그리드 주의 할

한 가지 행이는 "슬라이더"이며, 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> 

해결책 :

마지막으로 그것을 밖으로 생각 : 키 내가 슬라이더와 같은 행에있는 '슬라이더'의 상단에 레이어 다음 플로트를 사용하려고 한 이미지를 넣어했다가 : 떠났다.

<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 : 여기에 최종 HTML의 당신의 HTML에서

.logo { 
position: absolute; 
float: left; 
left: 20px; 
top: -90px; 
z-index: 10; 
    } 

Answer 1

이 OK 인 경우,이 순간 당신이하는 셀에만 내부의 셀에만있다, then

이것이 좋지 않으면 첫 번째 .row div를 닫은 다음 CSS 선택기를 수정해야합니다. 그들 사이에 neigboor ~을 추가하여 rs :

.row ~ .row 

이렇게하면 첫 번째와 다음 것을 제어 할 수 있습니다.

Answer 2

하단의 '질문'섹션에 답변을 추가했습니다.