Wie verschiebt man die Suchleiste nach oben auf die Seite?

Question

Ich möchte eine Suchleiste von der Mitte der Seite an den Anfang derselben Seite verschieben, ansonsten die nächste Seite, genau wie die Google-Suche. Ich brauche einen guten Vorschlag, bitte hilf mir.

Dies ist meine Suche Strichcode:

<div class="big-search-box"> 
    <form role="form" class=""> 
     <div class="input-group"> 
      <input type="text" placeholder="Input your search query..." class="form-control nrb input-lg"> 
      <div class="input-group-btn"> 
       <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle btn-iconed btn-lg" type="button"> 
        <i class="fa fa-file-text-alt"></i> <span>Search</span> 
       </button> 
      </div> 
     </div> 
    </form> 
</div> 

Answer 1

Sie sollten einen Code bereitstellen, um uns zu helfen, Ihnen zu helfen. Lesen this

Css Positionierung sollte es tun, und da wir keinen Code haben, krank verweisen Sie auf diese article ich online gefunden.

Beispiel:

div.relative { 
position: relative; 
left: 30px; 
border: 3px solid #73AD21;} 

Edit: Dank den Code für das Hinzufügen, sollte dies den Trick

.big-search-box { 
position: relative; 
width: 50%; 
left: 25%; 
top: 350px; 
} 

Sie können das obige Stück CSS ändern, was Ihren Bedürfnissen entspricht.

Answer 2

Wenn auf der Hauptseite es würde wie folgt aussehen:

width: 50%; //centered in the middle of the page 
left: 25%; 
top: 500px; 
position: absolute; 

Und dann, wenn Sie die Suchergebnis-Seite (wie Google) eingeben würde es so aussehen:

width: 50%; //moved to upper left corner (like google) 
left: 1%; 
top: 5px; 
position: absolute;