position
position 속성
position 속성을 통해 문서 상에 요소를 배치하는 방법을 설정한다. 다음과 같은 값을 줄 수 있다.
static - 기본값. 일반적인 순서에 의한 배치 설정
relative - 일반적인 순서에 의해 배치하지만 위치 조정이 가능하도록 설정
absolute - 일반적인 순서에 의해서 배치되지 않고 가장 가까운 position이 설정된 영역을 기준으로 배치 설정
fixed - 일반적인 순서에 의해서 배치되지 않고 화면으로 기준으로 배치 설정
sticky - 일반적인 순서에 의해서 배치하지만 스크롤 이동 시 지정된 위치에 부착되도록 배치 설
그리고 position과 함께 사용할 수 있는 세부 속성들은 다음과 같다.
top - 상단으로부터의 간격(offset)
bottom - 하단으로부터의 간격(offset)
left - 좌측으로부터의 간격(offset)
right - 우측으로부터의 간격(offset)
z-index - position이 설정된 영역 간의 z축 순서
static
position:static; 설정 영역은 일반적인 순서에 의해서 위치가 정해진다. 일반적인 순서라 함은 먼저 작성된 영역이 먼저 자리를 잡고, 나중에 작성된 영역은 이후에 배치되는 것을 말한다.
relative
position:relative; 설정 영역은 position:static; 과 동일한 배치가 이루어진다. 다른 점은 배치된 위치에서 top, left, right, bottom 등을 통해 간격을 설정할 수 있고, z-index 설정으로 겹치는 영역에 대한 표시 순서를 설정할 수 있다는 것이다.
absolute
position:absolute; 설정 영역은 static, relative 등과 다르게 일반적인 순서 배치가 적용되지 않는다. 가장 가까운 position 설정 영역을 기준으로 배치를 계산한다. 가장 가까운 position 설정 영역이 없을 경우 문서를 기준으로 배치한다.
fixed
position:fixed; 설정 영역은 static, relative 등과 다르게 일반적인 순서 배치가 적용되지 않는다. Viewport(뷰포트)를 기준으로 배치를 계산한다. 스크롤을 통한 화면 이동이 발생해도 해당 위치에 고정되어 있다.
sticky
position:sticky; 설정 영역은 static과 동일하게 위치가 정해진다. 스크롤을 통한 화면 이동이 발생하여 해당 위치를 벗어나는 경우 가장 가까운 position이 설정된 영역 내에서 fixed와 동일하게 처리된다.
중앙 배치
position을 활용하여 화면 중앙에 영역을 배치할 수 있다. top, left 또는 right, bottom을 각각 50%씩 부여하고 margin이나 transform 등으로 세부 위치를 조정하는 형태이다.
z-index
z-index 속성은 position:static; 을 제외한 position이 설정된 영역에서 z축 배치를 설정한다.
Last updated