요소 위에 요소 얹는 방법

결론은 아래 개념이다.

아래에 있을 div(부모): position: relative;
위로 위치할 div(자식): position: absolute;

relative는 상대위치 기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표(top, bottom, left, right)를 사용하여 위치를 이동시킨다.

absolute는 절대위치 부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표(top, bottom, left, right)만큼 이동한다. 즉, relative요소를 기점으로 움직이기 때문에 relative 위에 위치할수 있다.

.products {
  text-align: center;
  position: relative;
}

.sold-out::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 133px;
  background: url(/images/품절\ 표시.png);
  background-repeat: no-repeat;
  width: 94px;
  height: 130px;
}

[완성모습]
Violet_Cola(두번째 제품) 위에 품절 표시 구현