z-index

z-index 는 쉽게 말하자면 층을 쌓는 개념이다. 숫자가 높을 수록 화면의 가장 윗층에 쌓이기 때문에 화면 가장 앞쪽에 보이게 된다. 헤더를 앞으로 보이게 할 때 유용하게 쓸 수 있다.

const HeaderStyle = styled.header`
  position: fixed;
  width: 100%;
  height: 50px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: ${({ theme }) => theme.colors.white};
  text-align: center;
  z-index: 999;
`;