floating 버튼 만들기 (z-index)

당근마켓을 보면,

게시물 화면 하단에 글쓰기 버튼이 있는 것을 볼 수 있다.

콘텐츠의 화면을 해치지 않으면서, 글 작성을 쉽게 유도할 수도 있고,

홈화면, 마이페이지, 북마크 게시글 등 기능들이 많이 나열되어 있는 것 보다,

화면 내에 UI를 해치지 않으며, 버튼을 넣을 수 있도록 하고자 한다.

CSS에서 z-index 속성을 사용하면, 쉽게 화면 가장 위에 버튼이 위치하도록 할 수 있다

(여기서 위는 스택처럼 쌓인 구조에서, 가장 위에 오는 컴포넌트의 의미)

z-index는 CSS에서 요소의 쌓임 순서를 지정하는 데 사용되는데

z-index 값이 높을수록 해당 요소가 다른 요소 위에 표시된다

(position 속성이 relative, absolute, fixed, sticky로 설정된 요소에만 적용됨)

예를 들어


        .box1 {
            background-color: red;
            top: 50px;
            left: 50px;
            z-index: 1;
        }
        .box2 {
            background-color: blue;
            top: 70px;
            left: 70px;
            z-index: 2;
        }
        .box3 {
            background-color: green;
            top: 90px;
            left: 90px;
            z-index: 3;
        }

세 개의 상자(box)가 겹쳐져 있는데

z-index 값을 다르게 설정했기 때문에, 초록색 상자(box3)가 가장 위에 표시되고, 파란색 상자(box2)가 그 다음, 빨간색 상자(box1)가 가장 아래에 표시된다

이를 버튼에 적용시켜 보면


const FloatingButton = styled(Link)  position: fixed; // 화면에 고정
	bottom: 20px; // 화면 아래에서 20px 위로  
	right: 20px; // 화면 오른쪽에서 20px 왼쪽으로 
	z-index: 1000; // 다른 요소들 위에 표시되도록 z-index 설정
;

z-index: 1000;

가장 상단에 위치시키기 위해 z-index 값을 크게 넣으면 되는데,

임의로 1000을 넣었다.

아래와 같이, floating버튼을 만들 수 있다