[CSS] Position- relative /absolute

1. relative 

 

현재 레이아웃에 영향을 주지 않으면서 box1만 이동시킴

 

 

 

 

 

2. absolute

 

 

<!-- 
  자동 완성   .wrap>.left+.right+.bottom

  absolute position - 자유로운 엘리먼트 배치
  부모 엘리먼트에 구애받지 않고 엘리먼트를 자유롭게 배치시킬 수 있다
  CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정함
  기본값은 static 이며 relative 나 absolute, fixed 등으로 변경이 가능함
  position 속성을 static이 아닌 다른 값으로 설정했을 때 함께 사용하는 
  포지셔닝 관련 CSS속성이 있다 (top, left, bottom, right 4가지이다)

  absolute position의 특징
  : 부모 엘리먼트 내부에 속박되지 않고 독립된 배치 문맥을 가짐
  : 브라우저화면(viewport) 상에서 어디든지 원하는 위치에 배치 가능
    심지어 부모 엘리먼트 위에 겹쳐서 배치할 수도 있음
  : 단 상위 엘리먼트 중에 position 속성이 relative 인 엘리먼트가 있다면
    가장 가까운 엘리먼트의 내부에서 자유 배치 가능함
 -->



absolute는 무조건 기준점이 부모 태그가 아니라 
부모자기 부모 요소중에 position이 있는 요소 중
가장 가까운 요소가 기준점이 된다  
그래서 p태그 부모인 right에 position이 없으니까
위에 wrap를 보는데 여기도 position이 없으니까
부모인 body에 위치가 된다

relative는 자기 영역을 유지하면서 하는데
absolute는 자기 영역을 무시하고 뜯어져 나온다