css_position

position

• 문서 상에 요소를 배치하는 방법을 정의
• position이 요소의 배치 방법을 결정하면 top, bottom, right, left로 최종 위치를 결정
• ~에서부터 이동한다는 뜻(~로 이동한다 X)
• 속성 값 : static, relative, absolute, fixed

position 이동 방식

• static
  기본값. 요소를 일반적인 문서 흐름에 맞게 배치

• relative
  문서 흐름에 맞추어 원래 배치된 자리를 기준으로 요소를 이동시킴

  position: relative;
   top: 50px;
   left: 50px;
  =>위를 기준으로 50px, 왼쪽을 기준으로 50px 이동함

• absolute
  position이 지정된 상위 요소를 기준으로 요소를 이동시킴.(position이 지정된 위치를 기준으로 움직임 만약 position이 지정된 요소가 없다면 기준점이 없어져서 화면을 기준으로 위치를 지정) 이때 요소는 문서의 흐름에서 제외됨(원래 있어야 할 위치는 무시되고 새롭게 요소 혼자서 자기 위치를 찾아감 & 나머지 요소들은 해당 요소가 없는 것 처럼 자리잡음)

  • absolute 속성을 가진 자식이 나를 기준으로 절대적으로 자리를 차지 해라.(relative한 부모를 기준으로)

  position: absolute;
   right: 50px;
   top: 50px;
   =>해당 요소 가 문서의 흐름에서 제외하고(원래 있어야 할 위치를 무시)

• fixed
  화면을 기준으로 요소의 위치를 고정함
  어떠한 상황이 있어도 지정된 위치에 있음
  스크롤 이동하는 순간에도 지정된 위치 고정

• scroll
  스크롤을 발생시키기 위한 요소