[React]floating button

개요

지난 프로젝트에서 floating 버튼을 구현했던 과정으로 floating button을 배치하고 배치하는 과정에서 나왔던 클릭 이슈 문제를 해결했던 문제입니다.

시도1. position: fixed

처음에 구현하려 했던 배치로 프로젝트에서 outer의 크기는 고정이 되고 위치도 항상 중간에 배치되는 구조로 button의 위치는 outer 좌측 하단에 스크롤 상관 없이 고정된 위치이다. 그래서 floating버튼의 position:fixed 만 적용 시키면 될 줄 알았다.

//html
<div class="outer">
 <button class ="fab">fab</button>
</div>

//css
.outer{
  border:1px solid red;
  height:1000px;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.fab{
  position: fixed;
  bottom:100px;
  right:400px;
}

위와 같이 fab 버튼의 position을 fixed로 적용하고 outer안에 fab가 고정되길 원했지만 fixed의 기준은 viewport로, viewport의 크기가 변경되면 변경된만큼 움직였다.

시도2.layer

어떻게 구현해야 될지 몰라서 다른 팀원에게 도움을 청했고 답변으로 받은 것이 layer를 하나 넣어주는 방식을 알게되었다. layer의 역할은 position:fixed로 화면상 고정이 되며, fab의 position: absolute시 기준이 되는 것이다. 그래서 layer를 하나 넣어 주는 방식으로 구현을 했다. layer를 하나 넣어서 크기는 box에 맞춰주고 position을 fixed로 화면에서 고정했다.그리고 fab를 absolute로 layer 안에서 원하
는 위치에 배치했다.

//html
<div class="outer">
 <div class="innerLayer">
    <button class ="fab">fab</button>
 </div>
</div>

//css
.outer{
  border:1px solid red;
  height:1000px;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.innerLayer{
  background-color:rgb(43,110,176);
  opacity:40%;
  width:500px; //outer와 크기를 맞춰준다.
  height:200px;
  position:fixed;//fixed로 화면에 고정
  bottom: 100px;
}
.fab{
  position:absolute; //absolute로 layer 안에 원하는 위치에 배치
  bottom:20px;
  right: 20px;
}

이제 원하던 대로 fab은 화면상 고정도 됐고, 화면 크기가 줄어도 위치가 변하지 않는다. 그런데 여기서 나왔던 문제가 layer의 배치로 layer 밑에 있는 아이템을 클릭할 수 없는 문제가 생겼다.

문제. layer 아래 아이템 클릭 이슈

fab 배치는 내가 원하는대로 되었지만 layer가 생기면 그 아래에 있는 아이템에 대해서 클릭이 안되는 문제가 생겼다. 그래서 이 문제에 대해서 검색을 해보니 css의 pointer-events라는 속성을 알게되었다.

pointer-events
특정 그래픽 요소가 포인터 이벤트의 대상이 될 수 있는 상황(있는 경우)을 설정하는 pointer-events CSS 속성입니다.
MDN : pointer-events

.innerLayer{
 ...이전 코드;
 pointer-events: none; //클릭 이벤트 대상이 안되도록
}
.fab{
 ...이전 코드;
 pointer-events:auto;//layer안에 있지만 클릭 이벤트 대상이 가능하도록
}

이제 해당 버튼도 작동이 가능하고 layer는 클릭 대상이 아니라서 layer 아래의 아이템도 클릭이 가능하게 되었다.