[CSS] Position

CSS에서 Position 위치를 지정할 수 있는 4가지 방법

기본적으로 왼쪽에서 오른쪽 / 위에서 아래의 순서로 배치됨

1. float : left,right

float은 위로 띄우는것 그럼 그 다음에 있던 것들이 치고 올라오겠지

자기가 출력될 자리에서 공중에 뜨는 것

div 경우 float를 사용할때

width,height를 지정하지 않으면 content의 내용에 따라 크기가 나타나게됨

2. position:absolute 

조상(부모x)을 기준으로 상대적인 위치를 지정함

조상 : absolute or relative

조상중에 absolute or relative가 없으면 body를 기준

3. position:fixed

웹 브라우저 client영역

스크롤 상관없이 고정 위치

4. position:relative

1,2,3은 출력순서를 벗어난다

얘는 현재 위치 고정, 밑에 애들이 치고 올라오지 못한다.

---

absolute는 뷰포트에 상대적으로 위치가 지정되는게 아니라 가장가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다.

absolute가 되면 div여도 width:100%가 되지 않음