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 설정 영역이 없을 경우 문서를 기준으로 배치한다.
가장 가까운 position 설정 영역이란 static을 제외한 relative, absolute, fixed, sticky를 설정한 영역을 말한다.
fixed
position:fixed; 설정 영역은 static, relative 등과 다르게 일반적인 순서 배치가 적용되지 않는다. Viewport(뷰포트)를 기준으로 배치를 계산한다. 스크롤을 통한 화면 이동이 발생해도 해당 위치에 고정되어 있다.
Viewport는 문서가 표시되는 화면의 영역을 말한다. 브라우저(Browser)의 메뉴, 테두리 등을 제외한 문서 표시 영역이라고 볼 수 있다.
sticky
position:sticky; 설정 영역은 static과 동일하게 위치가 정해진다. 스크롤을 통한 화면 이동이 발생하여 해당 위치를 벗어나는 경우 가장 가까운 position이 설정된 영역 내에서 fixed와 동일하게 처리된다.
sticky의 경우 지원하지 않는 브라우저가 많이 있으니 사용 시 주의해야 한다.
지원하지 않는 브라우저를 고려해야 할 경우 Javascript 등을 활용하여 프로그래밍 처리로 구현한다.
중앙 배치
position을 활용하여 화면 중앙에 영역을 배치할 수 있다. top, left 또는 right, bottom을 각각 50%씩 부여하고 margin이나 transform 등으로 세부 위치를 조정하는 형태이다.
z-index
z-index 속성은 position:static; 을 제외한 position이 설정된 영역에서 z축 배치를 설정한다.
z-index는 건물 층계로 이해할 수 있다.
z-index : 1;- 1층에 배치z-index : 2;- 2층에 배치z-index : -1;- 지하 1층에 배치
하늘에서 건물을 내려다보면 높은 층부터 보이며, z-index에 따른 표시 방식도 동일하다.
Last updated