静态元素的定位答案

【问题标题】：Positioning of a static element静态元素的定位
【发布时间】：2017-08-17 12:25:24
【问题描述】：

我现在正试图将搜索栏放在顶部：

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

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

【问题讨论】：

您尝试了什么，为什么没有成功？另外... bottom 这个词与它从bottom 定位有什么关系吗？（提示提示）
@Roy Prins hace 我只想移动顶部的输入搜索，而不是他们没有的蓝色按钮
这不是问问题的方式，坦率地说，我对您的帮助超出了我应有的程度。首先使用 google 并提供一个您尝试过的示例并说明为什么它不起作用。

标签： css angular ionic-framework grid ionic3

【解决方案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

【讨论】：