Positionnement d'un élément statique

Je suis en train de mettre ma barre de recherche en haut, en ce moment:Positionnement d'un élément statique

Comme vous le voyez dans l'image ci-dessous ma recherche est en bas. Ce que j'essaie de faire est de placer en haut, sous la barre d'outils.

Ceci est mon css:

.buscador { 
     position: fixed; 
     bottom: 20px; 
     left: 50%; 
     transform: translate3d(-50%, -50%, 0); 
     width: 90%; 
     border-radius: 10px; 
     text-align: center; 
     z-index: 100; 
     opacity: .9; 
    }

Source

2017-08-16 Ivan More Flores

Qu'avez-vous essayé, et pourquoi cela n'a-t-il pas fonctionné? Aussi ... le mot 'bottom' pourrait-il avoir quelque chose à voir avec le fait qu'il soit positionné du 'bas'? (indice indice indice) –

@Roy Prins hace Je veux déplacer uniquement l'entrée-recherche pour le haut, Pas les boutons bleus qu'ils ne font pas –

Ce n'est pas une façon de poser une question et je vous ai franchement aidé plus que je devrais avoir . D'abord, utilisez google et donnez un exemple de ce que vous avez essayé et indiquez pourquoi cela n'a pas fonctionné. –

Vous pouvez facilement le faire en utilisant Ionic grid et Flexbox.

Vous pouvez concevoir la mise en page comme indiqué ci-dessous:

.scss

.home { 

    scroll-content { 
     display: flex; 
     flex-direction: column; 
    } 

    ion-grid { 
     padding: 0; 
     height: 100%; 
    } 

    .row1 { 
     flex: 1; 
    } 

    .row2 { 
     flex:9; 
    } 

}

.html

<ion-content class="home"> 

    <ion-grid> 

     <ion-row style="background-color: #e74c3c;" class="row1"> 
     <ion-col>Your search bar</ion-col> 
     </ion-row> 

    <ion-row style="background-color: #f1c40f;" class="row2"> 
     <ion-col>Map details</ion-col> 
    </ion-row> 

    </ion-grid> 

</ion-content>

Plunker is here

Nice article about the layout design

Source

2017-08-17 04:24:53 Sampath

Positionnement d'un élément statique

Répondre

Questions connexes