레이아웃 (4) POSITION 속성 사용하기

(1) POSITION 속성 사용하기

 - position:none : 속성 값 없음

 

See the Pen position 속성 사용하기 by ++EXP (@pp_exp) on CodePen.

 - position:absolute : 절대좌표-브라우저의 최외곽 최상단(0,0)에 위치하고, 스스로가 위치하는 영역이 없다.

   주로 메뉴 바 등 영역에 지장을 주지 않는 부분에 사용된다.

 

 - position:relative :  상대 좌표-(현 위치 = 0,0)을 기준으로 위치하고, 스스로 위치하는 영역이 있다.

   주로 슬라이드 쇼 영역 지정 등에 활용된다.

 

 - position:fixed : 고정좌표- 절대 좌표 기준으로 배열되지만, 화면 내에서 위치가 변하지 않는다. 

   주로 팝업 창 속성 제작에 사용된다.

 

 

(2) top & left 속성

 

 

 

top 속성

 - 기준좌표에서 위에서 아래로 떨어진 거리

 

left 속성

 - 기준좌표에서 좌에서 우로 떨어진 거리

 

position:absolute,fixed의 기준좌표

브라우저 본문 최상단, 최우측값이 top : 0, left: 0

 

position:relative의 기준좌표

본래 요소의 위치가 기준점. 요소마다 다르다.

 

(3) z-index 속성

 

See the Pen z-index 배치 속성의 사용 by ++EXP (@pp_exp) on CodePen.

position속성은 나중에 작성된 요소를 가장 최상위로 올려서 표현한다.

이때 배치 순서를 바꾸는 속성은 z-index이다.

 

z-index : position 속성이 적용된 대상만 사용할 수 있고, 우선순위는 position 속성을 기준으로 정한다.