定位一個靜態元素

我試圖把我的搜索欄放在上面，現在：定位一個靜態元素

正如你在下面的圖片中看到的，我的搜索是在底部。我試圖做的是放在頂部，在工具欄下。

這是我的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; 
    }

來源

2017-08-16 Ivan More Flores

你嘗試了什麼，爲什麼它不起作用？另外......底部「這個詞有沒有與它從底部定位？（提示提示提示） –

@Roy Prins hace我只想移動頂部的輸入搜索，不是他們沒有的藍色按鈕 –

這是沒有辦法問一個問題，我坦率地幫助你超過我應該有的。首先使用谷歌，並提供一個你已經嘗試過的例子，並指定爲什麼沒有工作。 –

您可以輕鬆地做到這一點使用Ionic grid和Flexbox。

，如下圖所示，您可以設計佈局：

.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

來源

2017-08-17 04:24:53 Sampath

定位一個靜態元素

回答

相關問題