css relative position: 겹쳐서 표현하기

카카오톡에서 메뉴바를 보면 위의 사진과 같이 말풍선 이모티곤 위에 알림이 뜬다. 이를 html과 css에서 나타내는 방법을 기록한다.

 

먼저 html에서 채팅 목록으로 이동할 수 있는(a) 말풍선 아이콘(i)와 알림의 개수(span)을 나타낸다.

<a class="nav__link" href="#">
      <span class="nav__notification">12</span>
      <i class="fa-regular fa-comment fa-2x"></i>
</a>

 

그리고 이 html을 꾸미는 css에서 필요한 속성을 설정한다. span tag가 inline 속성을 지니기 때문에 flex로 변경하고, 배경 크기를 조절하고, 적절한 모양새를 갖추면 된다.

.nav__notification {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: tomato;
    font-size: 10px;
    font-weight: 600;
    color: white;
}

 

상대적 위치를 조절하기 위해서 아이콘과 span을 감싸는 nav__link의 position을 relative로 설정한다. 그리고 아이콘에 비하면 상대적인 위치이고, 그 위치에서 절대적으로 움직이기 위해 nav__alarm의 position을 absolute로 설정한다. 그 후 top, bottom, left, right으로 위치를 조정하면 된다.

.nav__link {
    position: relative;
}

.nav__notification {
	/* 위의 코드 참고 */
    position: absolute;
    left: 20px;
    bottom: 15px;
}