CSS) CSS position attribute

CSS position attribute 

= 문서 상에 요소를 배치하는 방법을 지정.

 

 

 

 

cr: developer.mozilla.org/ko/docs/Web/CSS/position

 

static	요소를 일반적인 문서 흐름에 따라 배치
relative	요소를 일반적인 문서 흐름에 따라 배치하고,  자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용.
absolute	요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 대신 가장 가까운(위치) 부모요소에 대해 상대적으로 배치
fixed	요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 대신 뷰포트의 초기 컨테이닝블록을 기준으로 삼아 배치
sticky	스크롤 동작(overflow가 hidden, scroll, auto 혹은 overlay) 이 존재하는 가장 가까운 조상에 달라붙음.

default값 = static.

 

 

position: absolute;

= 부모 엘리먼트애 구애받지 않고 엘리먼트를 자유롭게 배치함.

부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가짐.

 

= 엘리먼트를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며,

심지어 부모 엘리먼트 위에 겹쳐서 배치할 수도 있음.

 

 

 

 

---

 

REFERENCE

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

 

https://www.daleseo.com/css-position-absolute/

[CSS] Absolute Position - 자유로운 엘리먼트 배치