Comment placer le bouton fab sur le bord d'un div?

Question

En haut de la page, j'ai une div pour laquelle l'image de fond a été définie. Je veux placer le bouton fab sur le bord inférieur droit de cette div. Exactement comme l'image suivante. Comment puis-je faire ceci?

Answer 1

Voici ce que je pouvais rendre au travail. Cela fonctionne en créant un fab-conteneur qui va superposer le conteneur principal sur cette page. Pour que cela fonctionne, vous devez connaître leurs hauteurs. Ensuite, nous faisons en sorte que le z-index fab-container de 1 soit sur le dessus. Ensuite, nous pouvons utiliser flex pour que le fab soit en bas à droite. Ensuite, nous pouvons ajouter une marge supérieure de la moitié de la taille de l'usine au fab-conteneur pour avoir le vol stationnaire à mi-chemin entre les deux. Enfin, nous pouvons ajouter marge-droite pour obtenir la fabulation du côté droit.

Cela peut ne pas être la meilleure façon de le faire, car cela nécessite de connaître la hauteur de votre conteneur, mais c'était la façon dont j'aborderais cette tâche.

<ion-content> 
    <div class="container"></div> 
    <div class="fab-conatainer"> 
     <ion-fab class="fab"> 
      <button ion-fab> 
       <ion-icon name="camera"></ion-icon> 
      </button> 
     </ion-fab> 
    </div> 
    <div class="contacts-container"> 
     <ion-list> 
      <ion-item> 
       <ion-input placeholder="Name"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-input placeholder="Phone"></ion-input> 
      </ion-item> 
      <ion-item> 
       <ion-input placeholder="Email"></ion-input> 
      </ion-item> 
     </ion-list> 
    </div> 
</ion-content> 

CSS

.container { 
    width: 100%; 
    background: #333; 
    height: 500px; 
} 

.fab-conatainer { 
    display: flex; 
    justify-content: flex-end; 
    align-items: flex-end; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 500px; 
    z-index: 1; 
    margin-top: 28px; 
} 

.fab { 
    margin-right: 14px; 
} 

Answer 2

Il suffit d'utiliser l'attribut edge qui vient avec fabs:

<ion-fab bottom right edge> 
    <button ion-fab><ion-icon name="camera"></ion-icon></button> 
</ion-fab> 

Pour que cela fonctionne le div (ou toute étiquette) ayant la fab doit à l'intérieur ont position défini sur relative, absolute ou fixed pour travailler, position: inherit peut également fonctionner en fonction du positionnement du parent.

Espérons que cela aide.

Answer 3

Grâce à @Garrett et @Gabriel, j'ai réussi à utiliser le balisage suivant et scss. Il est important de placer le bouton FAB à l'intérieur du div auquel nous voulons affecter l'image d'arrière-plan afin que nous puissions utiliser relative positionnement:

<ion-content> 

    <div id="header"> 
    <ion-fab bottom right edge> 
     <button ion-fab><ion-icon name="camera"></ion-icon></button> 
    </ion-fab> 
    </div> 

</ion-content> 

Et le fichier scss:

#header { 
    background-image: url('../assets/images/anonymous.jpg')!important; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    height: 25vh; 
} 

ion-fab { 
    position: relative; 
} 

ion-fab[bottom][edge] { 
    bottom: -21vh; 
} 

.fab { 
    margin-right: 3vw; 
}