레이아웃 (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 속성을 기준으로 정한다.