div의 가장자리에 fab 버튼을 배치하는 방법은 무엇입니까?

Question

페이지 상단에 백그라운드 이미지가 설정된 div가 있습니다. 이 div의 하단 오른쪽 가장자리에 fab 버튼을 배치하고 싶습니다. 정확히 다음 그림과 같습니다. 어떻게해야합니까? 여기

Answer 1

내가 일을 얻을 수있는 것입니다. 이 페이지에서 주 컨테이너를 오버레이 할 fab 컨테이너를 생성하여 작동합니다. 이를 위해 당신은 그들의 높이를 알아야합니다. 그런 다음 fab-container z-index를 1로 설정합니다. 그런 다음 flex를 사용하여 팹을 하단 오른쪽에 배치 할 수 있습니다. 그런 다음 팹의 크기의 절반을 팹 컨테이너에 추가하여 팹 호버를 중간에 배치 할 수 있습니다. 마지막으로 우리는 마진을 추가하여 팹을 오른쪽에서 벗어날 수 있습니다.

컨테이너의 높이를 알아야하기 때문에 이것이 최선의 방법이 아니지만이 작업에 접근하는 방법이었습니다. 내부에 있어야합니다 div (또는 태그) 팹을 갖는 일이 들어

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

:

<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

그냥 fabs과 함께 제공되는 edge 속성을 사용 position을 relative, absolute 또는 fixed으로 설정하면부모 위치에 따라이 너무 효과가있을 수 있습니다.

희망이 도움이됩니다.

Answer 3

@Garrett 및 @Gabriel 덕분에 다음 마크 업과 scss를 사용하여 작업하고 있습니다.

<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> 

그리고 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; 
}