html, css 포지션position : relative ,absolute

position   :  포지션 말 그대로 상 태 위치 지정요소이다  

포지션은 상속이 되지 않는다.

relative, absolute, fixed, sticky 중 하나인 요소입니다. 즉, 값이 static이 아닌 모든 요소를 말합니다

 

static 은 기본값입니다. 포지션을 지정하지 않았을 대 defaut 값

가장 위 top , left  왼쪽에 배치가 된다.

 static 은 top, left, bottom, right 값을 전부 무시한다

 

상태 위치 지정 요소는 position 계산값인 relative 요소입니다. 

부모 기준의 element 위치 절대적인 위치 값을 설정한다.                                             relative        현재 위치에서 이동!

left - right 왼 우 가로축 거리 지정    top-bottom 우 아래 세로 축 거리 지정

 

절대 위치 지정요소 positiondms absolute 또는 fixed 입니다 .

모서리루부터 의 거리를 지정한다. 요소가 바깥여백을 가진다면 거리에 더한다,                   absolute   선택한 박스 상자에서 이동  

                                                                                                                                       fixed :   상자 위치에서 벗어나 페이지에서 이동

 

 

가장 가까운 위치에 있는 부모 요소를 기준으로 배치한다.      

 

문서상 위치를 잃어버린다.

 

끈끈한 위지 지정요소 position: sticky 요소  화면에 고정하는 요소이다. 

 

position을 사용하기

Top left right bottom 속성을 통해 요소의 최종 위치를 결정합니다..

1. 기준을 잡는다 [position:relative]
2. 이동을 시킨다. ( top-50px)

 

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

<position> - CSS: Cascading Style Sheets | MDN

공식문서 참고하기