position

 

조금 더 이쁜 웹 디자인을 위해서는 배치가 제일 중요하다고 생각한다.

 

flex 와 gird가 있지만 브라우져들마다의 지원 버전이 다를수 있으니 기초의 position 도 익혀야할것이다.

 

---

     static : default 값으로 , 자동 배치되며 임의로 위치 설정 불가능

 

   relative : 원래 자리하던 위치 기반으로 위치 설정

 

 absolute : 절대 좌표와 함께 위치 지정 

 

      fixed : 스크롤과 상관없이 보여지는 화면에 항상 고정

 

---

 

static

html 요소는 기본적으로 static .즉 초기값이다.

 

top , bottom , left , right 속성의 값에 영향 받지 않는다.

 

 

 

relative

요소를 위의 static처럼 문서 흐름에 배치한다.

 

그 후에 자기 자신을 기준으로 위치 변경

 

absolute

 

가장 가까운 위치에 있는 조상을 기준으로 배치한다.

 

하지만 상위 조상이 없다면 절대 좌표가 된다

 

fixed

 

페이지가 스크롤이 되더라도 항상 같은 위치에 유지된다

 

 

추가적으로 z-index의 값이 있는데 이는 겹쳐질때의 누가 상위에 있나를 결정