span 태그에 position:absolute를 주면 display 속성이 inline-block으로 변경되는걸로 알고있습니다.
그래서
.square 태그에 position: relative
.square span 태그에 position: absolute
를 주지 않고&nbsp;
.square span 태그에 display: inline-block 으로 주고 만들면 3개의 span 태그가 겹치는게 아니라 각각 분리되더라고요 분리되는 이유가 뭔지 알수 있을까요?

.square아 .square span을 부모자식으로 만들어야 정확하게 위치시킬 수 있습니다.
포지션을 주지 않고 그냥 인라인 블록으로 하시면 .square span 3개가 한 곳에 모이지 않을거에요.
코드와 출력되는 화면을 올려주시면 좀 더 정확한 답변을 드릴 수 있을 것 같습니다.

인프런 커뮤니티 질문&답변

inline-block , position: absolute