[CSS] relative와 absolute의 관계성, 차이점

프로젝트 진행하면서 계속 쓰다 보니 display: relative와 display: absolute를 언제 사용하는지 감이 잡히는 것 같다.

 

top, right, bottom, left와 같은 속성들을 사용 할 때는 display: static(기본값)을 사용할 수 없는 데

• display: relative 속성을 부여 시 해당 태그의 바로 위에 있는 부모 태그를 기준으로 이동한다. (상대적)
• display: absolute 속성을 부여 시 body 태그(브라우저)를 기준으로 이동한다. (절대적)
• display: relative와 absolute를 함께 사용 시에는 relative 속성을 가지고 있는 태그가 부모가 되고absolute 속성을 가지고 있는 태그가 자식 태그가 되어 상대적으로 이동한다. (상대적)

---

(CSS) CSS 포지션(position) - static, relative, absolute, fixed