ionic -App开发 | 绝对定位解决软键盘挤压页面影响布局 | 全屏背景图片 | 备忘

1. position:absolute；position:relative绝对定位
   父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位
   效果图:
   
   css:

page-login {
  height: 100%;
  //背景图片
  .backgroundImg {
    background: url(../../assets/img/login/loginBackground.png) no-repeat;
    background-size: 100% 100%; //全屏显示-主要的
  }
  .imgDiv {
    position: relative;   //父级
    width: 100%;
    height: 40%;
    text-align: center;
    //图标
    .login-logo {
      position: absolute; //子级
      margin-left: -16%; //子级进行绝对定位
      width: 120px;
      margin-top: 30%; //子级进行绝对定位,下面以此类推
    }
    .loginLabel {
      position: absolute;	 //子级
      text-align: center;
      margin-top: 80%;	//
      margin-left: 20px;   //
      margin-right: 36px; //
      padding: 16px;
      font-family: 'SimHei';
      .labelLogin {
        color: white;
        background: rgba(0, 0, 0, 0);//透明度
      }
      .loginBtn {
        border-radius: 20px;
        margin-left: 16px;
        background-color: #3CAAFF;
        color: white;
        font-size: medium;
        border-radius: 20px;
        margin-top: 15%;
        height: 40px;
        width: 90%;
      }
      .left {
        float: left;
        margin: 15px;
        .itemText {
          color: white;
        }
      }
      .right {
        margin: 15px;
        color: #3CAAFF;
        float: right;
      }
    }
  }
}

html:

<ion-content class="backgroundImg">
  <div class="imgDiv">
    <img class="login-logo" src="assets/login/logo-login.png">

  <div class="loginLabel">
    <ion-item class="labelLogin">
      <ion-label fixed>手&nbsp;机&nbsp;号:</ion-label>
      <ion-input placeholder="请输入手机号" [(ngModel)]="account.USERNAME" name="USERNAME"></ion-input>
    </ion-item>
    <ion-item class="labelLogin">
      <ion-label fixed>密&nbsp; &nbsp; 码:</ion-label>
      <ion-input placeholder="请输入密码" type="password" [(ngModel)]="account.PASSWORD" name="PASSWORD"></ion-input>
    </ion-item>
    <button class="loginBtn" (click)="doLogin()">登&nbsp;&nbsp;录</button>
    <span>
      <div class="left">
        <a class="itemText">没有账号?请先</a>
        <a (click)="signup('注册')" style="color:#3CAAFF ">注册</a>
      </div>
      <a class="right" (click)="signup('忘记密码')">忘记密码</a>
    </span>
  </div>
  </div>

</ion-content>
<!--

  <div class="loginDiv">
    <div style="padding: 40px">
      <ion-item class="loginLabel">
        <ion-label fixed>手&nbsp;机&nbsp;号:</ion-label>
        <ion-input placeholder="请输入手机号" [(ngModel)]="account.USERNAME" name="USERNAME"></ion-input>
      </ion-item>
      <ion-item class="loginLabel">
        <ion-label fixed>密&nbsp; &nbsp; &nbsp;码:</ion-label>
        <ion-input placeholder="请输入密码" type="password" [(ngModel)]="account.PASSWORD" name="PASSWORD"></ion-input>
      </ion-item>



    <div class="login-btn">
      <div>
        <button style="color:white;font-family:'SimHei';font-size: medium;  border-radius: 20px;margin: 10px" class="loginBtn" (click)="doLogin()">登&nbsp;&nbsp;录</button>
      </div>
      <div style="margin-left: 30px">
        <a class="itemText">没有账号?请先</a>
        <a (click)="signup('注册')" style="color:#3CAAFF ">注册</a>
        <a style="color:#3CAAFF " float-right (click)="signup('忘记密码')">忘记密码</a>
      </div>
    </div>

    <div class="agreement" text-center>
      <label>登录即表示您同意<a (click)="showAgreement()" href="javascritp:void();">《全民卫士用户注册协议》</a></label>
    </div>
  </div>
  </div>

-->