css position static relative absolute z-index

css position에서 기본 값 이름이 static입니다. relative 설정은 현재 위치에서 얼마나 이동할지 변경할 수 있습니다. absolute는 현재 위치가 기준이 아니라 전체 화면을 기준으로 위치를 결정합니다. 단 가까운 부모 중에서 position이 기본값 static이 아닌 다른 값으로 되어 있는 경우 거기부터 기준이 됩니다. position fixed를 사용하면 항상 그 위치에 있어서 둥둥 떠 있게 할 수 있어요. 또한 sticky를 사용하면 처음에는 static이다가 화면이 이동하면 fixed로 동작하는 것을 만들 수 있어요.

      #header {
        text-align: left;
        position: relative;
      }

      #header-hamburger {
        position: absolute;
        top: 18px;        
        left: -10px;
        padding: 10px;
        background: none;
        border: none;
        cursor: pointer;
      }

header-hamburger 위치를 header 기준으로 고정하고 싶은 경우 header에는 position 을 static이 아닌 것으로 설정합니다. 이번에는 position: relative; 으로 설정했어요. 햄버거에는 포지션과 top, left로 위치를 결정합니다. 

디자인 적으로 배경을 넣게 위해서 before를 넣을 수 있습니다. before를 넣으면 자식태그가 하나 생기는 것처럼 됩니다. 

      #header-hamburger {
        position: absolute;
        top: 18px;        
        left: -10px;
        padding: 10px;
        background: none;
        border: none;
        cursor: pointer;
      }

      #header-hamburger > div {
        background-image: url(/sp_main.png);
        background-position: -335px -284px;
        background-size: 422px 405px;
        background-repeat: no-repeat;
        width: 26px;
        height: 26px;
      }

      #header-hamburger:hover::before {
        position: absolute;
        top: 1px;
        left: 1px;
        content: '';
        width: 44px;
        height: 44px;        
        background-color: var(--color_option_bg);
        border-radius: 50%;        
      }

#header-hamburger:hover::before 작성하면서 absolute를 사용하면 header-hamburger가 부모가 되어 header-hamburger가 position이 static이 아니라면 기준은 header-hamburger이 됩니다.

      #header-hamburger > div {
        background-image: url(/sp_main.png);
        background-position: -335px -284px;
        background-size: 422px 405px;
        background-repeat: no-repeat;
        width: 26px;
        height: 26px;
        position: relative;
        z-index: 1;
      }

      #header-hamburger:hover::before {
        position: absolute;
        top: 1px;
        left: 1px;
        content: '';
        width: 44px;
        height: 44px;        
        background-color: var(--color_option_bg);
        border-radius: 50%;        
        z-index: 0;
      }

z-index는 형제끼리 적용됩니다. 레벨이 다른 경우에는 적용되지 않고 같은 레벨에 있는 경우에 적용됩니다. 또한 position이 기본은 static이 아니어야 합니다. 보통 position relative로 설정하고 top이나 left를 주지 않고 사용합니다.