[HTML+CSS] 17_Position 속성

position 속성(1)

#01. Position 속성 개요

1) Position 속성

• 어떤 요소의 위치를 자유자재로 이동하기 위한 방법을 결정한느 속성.
• margin이나 padding처럼 다른 요소와의 영향에 따른 배치가 아닌, 다른 요소의 위에 떠 잇는 상태로 이동하게 되므로 Position 속성이 부여된 요소를 레이어라고 부르기도 한다.
• CSS의 Position 속성은 Float 속성으로 레이아웃을 결정한 다음 각 요소의 디테일한 위치를 지정해주기 위하여 사용된다.

2) 값의 종류

값	설명
static	기본값. HTML 요소가 자신에게 주어진 원래의 위치에 배치되도록 한다.
relative	상대위치. HTML요소가 자신에게 주어진 원래의 위치를 기준으로 이동하도록 지정한다.
absolute	절대위치. HTML요소가 부모의 위치를 기준으로 이동하도록 지정한다.
fixed	고정위치. HTML요소가 스크롤의 여부에 상관없이 화면상에서 고정된 위치에 있도록 지정한다. 단, 이속성은 IE 하위버전에서는 적용되지 않는다.

3) 요소의 위치를 지정하기 위한 속성

• Position 속성에 static 이외의 값이 지정된 경우 다음의 CSS 속성을 활용하여 요소의 위치를 지정할 수 있다.

속성	설명
left	기준 요소의 왼쪽 끝에서 오른쪽으로 주어진 값 만큼 이동한다.
right	기준 요소의 오른쪽 끝에서 왼쪽으로 주어진 값 만큼 이동하다.
top	기준 요소의 윗쪽 끝에서 아래쪽으로 주어진 값 만큼 이동한다.
bottom	기준 요소의 아래쪽 끝에서 위쪽으로 주어진 값 만큼 이동한다.

• left, right, top, bottom 속성은 px, % 단위의 값을 사용한다.
• Position 속성에 어떤 값이 부여되는 가에 따라 이 속성들이 이동하기 위한 기준점의 좌표 설정 방식이 변경된다. (중요)

4) 요소의 층을 설정하는 z-index 속성

• HTML 태그의 요소를 서로 간섭 없이 이동시키게되면 어떤 요소들 끼리는 서로 겹쳐 있는 것 처럼 보이게 된다.
• z-index 속성은 position 속성을 갖는 요소들의 겹치는 순서를 결정하는데, 단순히 값의 크기만을 비교하기 때문에 반드시 순차적으로 부여될 필요는 없다.

#02. 상대좌표 방식

1) 상대좌표 방식(1)

• 세 개의 박스를 배치하고 position 속성을 relative로 지정함에 따른 이동 좌표 확인하기
• 박스의 기본 크기와 개별 배경색상을 지정한다.
• 두 번째 박스의 위치를 상대좌표 방식으로 이동 시킨다.
  • top: 30px -> 위에서 아래로 30px 이동
  • left: 30px -> 왼쪽에서 오르쪽으로 30px 이동
• #box2가 이동하더라도 주변 요소들은 #box2의 이동 사실을 모른다.

#03. 절대좌표 방식

#04. 고정좌표 방식