定位一个静态元素

我试图把我的搜索栏放在上面，现在：定位一个静态元素

正如你在下面的图片中看到的，我的搜索是在底部。我试图做的是放在顶部，在工具栏下。

这是我的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

定位一个静态元素

回答

相关问题