Question

我试图让我的按钮浮动在屏幕的右下角，而不是在屏幕上其他对象发生变化时改变位置。以下是我到目前为止的情况：

<head>
  <style>
  .button-float{
    z-index: 12;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
		position: absolute;
		bottom: 15px;
		right: 15px;
  	border-radius: 50% !important;
}
  </style>
</head>
<body ng-app="App">
<ion-header-bar align-title="center" class="bar-positive">
  </ion-header-bar>
      <ion-content class="has-header" overflow-scroll="false">
        <div>
             <a ng-repeat="equipment in equipment" class="item item-thumbnail-left" ng-click="goToEquipDetail(equipment)">
              <img src="resources/{{equipment.Photo}}">
              <h2>Item Name: {{equipment.ItemName}}</h2>
              <p>Serial Number: {{equipment.SerialNumber}}</p>
              <img style="position: absolute; right: 0; bottom: 0; width: 45px; height: 45px;"src="resources/{{equipment.EquipmentStatus.StatusPhoto}}">
               <p>Status: {{equipment.EquipmentStatus.StatusName}}</p>
             </a>
         <div>
      </ion-content>
      <button class="button button-float button-positive" ng-click="showOptions()">
        <i class="icon ion-plus"></i>
      </button>
</body>

但是当添加更多对象或移除对象时，按钮会移动。我需要它保持在屏幕的最底部，而不是像所示的对象顶部，也根本不移动。

我的造型中我做错了什么？感谢

Answer 1

将css位置设置为如下所示，

<style>
  .button-float{
    z-index: 12;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    position: fixed;
    bottom: 15px;
    right: 15px;
    border-radius: 50% !important;
}
  </style>

对齐屏幕离子html右下角的按钮

1 个答案: