定位静态元素

Question

我正试图将搜索栏放在最前面，现在：

如下图所示，我的搜索位于底部。我尝试做的是放在工具栏下面的顶部。

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

Answer 1

您可以使用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