css - 静态元素的定位

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