垂直对齐浮动标签在输入元素Ionic的中间

Question

所以，我不想使用占位符，而是想使用像占位符一样的离子标签。我需要在离子输入元素内垂直对齐 FLOATED 离子标签，当用户点击和/或在离子输入字段中输入文本时，离子标签应保持在其上面。

这是我到目前为止所得到的：

离子：

    <ion-item>
      <ion-label floating class="label__placeholder">SMS</ion-label>
      <ion-input name="first_name"
        type="text"
        ngModel
        required>
      </ion-input>
    </ion-item>

SCSS：

    ion-label {
      font-family: 'Roboto', sans-serif;
      font-size: 18px !important;
      margin-bottom: 5px;
      padding-left: 15px;

      &.label__placeholder {
        position: absolute;
        bottom: 30px;
      }
    }

这是现在的情况以及如果没有点击离子输入，离子标签应该是什么样子：

这就是当我点击离子输入时，离子标记位于离子输入的顶部，但它不可见：

这就是点击离子输入时的样子：

我设法将离子标记定位在离子输入的中间但是当我点击离子输入时，离子标记位于离子输入的顶部并且它不可见，就像它去的那样在某个地方，不知道在哪里。试图使用z-index，但它没有帮助。

Answer 1

我设法解决了这个问题。我删除了位置：绝对和底部：来自＆amp; .label__placeholder的30px并改为使用此代码并且它有效：

    ion-label {
      font-family: 'Roboto', sans-serif;
      font-size: 18px !important;
      padding-left: 15px;
      &.label__placeholder {
        font-size: 15px !important;
        line-height: 13px;
        margin-bottom: 0 !important;
      }
    }

以下是未点击离子输入时的状态以及以下情况：