css - rendering order 문제 (with position)

  .callaction {
  	position: 아직 선택이 안되있으면  position: absolute; 잇는 속성이 먼저 그려짐
  }
  .callaction:before {
    content: "";
    background: linear-gradient(to right bottom, #aa17c7b2, #bbc717ab 105%);
    width: 100%;
    height: 100%;
    position: absolute;
  }

이런 문제시 z-index로만 해결이 안됬었다
같은 태그가 겹치면 position 속성이 있는 태그가 먼저 그려지고
둘다 position을 가지고 있다면 relative가 absolute보다 우선되어 그려짐
그러니까 태그가 태그를 덮는 경우 그려져야 하는 대상에 position: relative;를 설정해줘야한다

     .callaction-heading {
      position: relative;
      나같은 경우는 이녀석이 그려질 대상이라서 여기에 속성부여
      }

하게되면 해결