회전식 컨베이어 상단에 검색 창을 배치하는 방법은 무엇입니까?

Question

같은 것을 만들고 싶습니다. airbnb

이것은 트위터 부트 스트랩을 사용하는 컨베이어 코드입니다.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 


    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <img src="rio.jpg" alt=""> 
     </div> 
     <div class="item"> 
      <img src="rio.jpg" alt=""> 
     </div> 
     <div class="item"> 
      <img src="rio.jpg" alt=""> 
     </div> 
    </div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div> 

이것은 내가 작성한 양식 레이아웃입니다.

<div class="form-group">  
     <div class="container"> 
      <div class="row"> 
      <div class="col-md-6"> 
       <input type="text" class="form-control input-lg" placeholder="Where do you wanna go?"> 
      </div> 
      <div class="col-md-2"> 
       <input type="date" class="form-control input-lg" name="start" placeholder="Check In"> 
      </div> 
      <div class="col-md-2"> 
       <input type="date" class="form-control input-lg" name="end" placeholder="Check Out">    
      </div> 
      <div class="col-md-2"> 
       <a class="btn btn-lg btn-success" href="#" role="button">GO</a> 
      </div> 
      </div> 
     </div> 
    </div> 

다음은 내가 시도한 것입니다.

.form-group{ 
    margin-top: -250px; 
} 

하지만 작동하지 않았습니다. 도와주세요.

Answer 1

"form-group"div를 회전식 div 상단으로 이동하십시오. 이처럼 :

div#carousel-example-generic { 
    position:relative; 
} 

div.form-group { 
    position:absolute; 
    z-index:9999999; 
    top:20px; /* change to whatever you want */ 
    left:10px; /* change to whatever you want */ 
    right:auto; /* change to whatever you want */ 
    bottom:auto; /* change to whatever you want */ 
} 

이 모든 브라우저 (IE6 +)에서 작동합니다 :

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <div class="form-group">  
    .... 
    </div> 
    other carousel html here... 
</div> 

는이 CSS를 추가 할 수 있습니다.