position 속성

김동현·2021년 10월 19일

CSS3

목록 보기

4/13

position

position 속성은 요소를 원하는 위치에 배치시키기 위해 사용합니다. 즉, 배치 기준점을 설정하는 속성입니다.
position 값에 따라 % 단위의 기준이 되는 요소가 결정됩니다.
값 의미 기본값
static 배치 기준 없음, 배치 불가능 static
relative 자신을 기준으로 배치
absolute 위치상 부모를 기준으로 배치
fixed 뷰포트를 기준으로 배치
position 속성을 사용할 때는 어떤 종류의 position을 사용하고 있는지, 그래서 무엇을 기준으로 배치가 되는지 주의해야 합니다.
배치 기준과 % 단위는 position 속성의 값에 따라 다르므로 주의해여 사용해야 합니다.

값	의미	기본값
static	배치 기준 없음, 배치 불가능	static
relative	자신을 기준으로 배치
absolute	위치상 부모를 기준으로 배치
fixed	뷰포트를 기준으로 배치

position: static;

모든 요소의 기본값이며 이는 배치 기준이 없다는 것을 의미합니다. 이는 배치 기준점이 없어 요소를 이동(top, bottom, right, left)시키지 못합니다.
% 단위를 사용한다면 기준이 되는 요소가 html 구조상 부모 요소가 기준이됩니다.

position: relative;

배치 기준점은 본래 자기가 위치한 자리가 배치 기준점이 됩니다.
요소를 위로 띄운 후 배치가 됩니다.
position: relative;를 적용하여 최종적으로 눈에 보여지는 요소는 실제로 그 위치에 존재하는 것이 아니라 위로 뜬 다음 이동하기 전 본래 그 위치에 그대로 존재합니다. 그러므로 주변 요소가 position: relative;된 요소를 기존 위치에 존재하는 것으로 인지하여 배치가 됩니다.
top, bottom, right, left 속성으로 배치할 수 있습니다. 이때 top과 bottom 동시에 작성하는 경우 top 속성이 우선시되고, right와 left 속성을 동시에 사용하는 경우 left 속성이 우선시됩니다.
top, bottom, right, left 속성값으로 % 단위를 사용할 때 자기 자신의 너비 백분율이 됩니다.

relative가 적용된 요소의 자식 요소들 또한 부모 요소와 같이 위로 뜬 후 함께 배치가 되며, 실제 위치는 기존 위치에 존재하기 때문에 다른 요소들이 영향을 받아 배치가 됩니다.

위 그림은child1 요소에 position: relatvie;를 적용하고 right: 200px을 설정한 결과입니다.

이처럼 첫 번째 child1 요소는 위로 뜨게된 후 자기가 원래 위치했던 자리를 기준으로 오른쪽으로 200px만큼 이동이 되었습니다. 실제로는 child1 요소는 기존 위치에 존재하는 것처럼 동작을 하며 이때문에 child2, child3 요소들 또한 기존 첫 번째 child 요소가 위치에 존재한다고 인지하고 배치가 됩니다.

position: abolsute;

배치 기준점은 position 속성값이 static이 아닌 값을 갖는 가장 가까운 상위 요소가 배치 기준점이 됩니다.
만약 배치 기준이되는 요소를 찾지 못한 경우 body 요소가 배치 기준이되는 요소가 됩니다.
float 속성과 유사하게 위로 띄운 후 배치가 됩니다.
display: block;이 되어 자동적으로 블록 요소로 수정됩니다.
이때 블록 요소이지만 width 값을 명시하지 않더라도 부모 요소 content 영역의 가로 너비를 모두 차지 하지 않으며, width 값을 명시하더라도 남은 가로 너비를 margin으로 채우지도 않습니다.
주위 모든 것(블록, 인라인 모든 것)들이 position: absolute;된 요소를 무시하고 배치가 됩니다.
top, bottom, right, left 속성값으로 % 단위를 사용한다면 기준이 되는 요소는 배치 기준점이 된 요소가 기준이됩니다.

즉, float 프로퍼티와 absolute의 차이점은 배치 기준점이 서로 다르며, absolute인 요소는 모든 것들이 absolute인 요소를 무시하여 배치가 된다는 점입니다.

absolute인 요소의 자식 요소들 또한 같이 위로 뜨게 되어 함께 배치가 되며, 주위 모든 것들이 위로 뜬 것들을 무시하여 배치가됩니다.
만약 absolute인 요소의 자식 요소중 relative인 자식 요소가 존재한다면 그 자식 요소의 기준점은 absolute로 인해 위로 뜬 후 배치가 된 지점이 기준점이 됩니다

참고로 float된 요소는 다음 형제 요소에 clear 프로퍼티를 사용하여 이후 형제 요소들이 float된 요소를 인지하도록 할 수 있지만, absolute인 요소들은 clear 프로퍼티를 사용하더라도 아무런 효과가 없습니다.

float: left | rigth;

위 그림과 같이 child1 요소에 float: left;를 지정하게 되면 블록 요소는 float된 요소를 무시하고 배치가 되지만, 인라인 특성을 갖는 텍스트의 경우 float된 요소의 존재를 인지하여 배치가 됩니다.

position: absolute;

child1에 position: abolsute;를 지정하게 되면 아래와 같은 결과가 출력됩니다.

child1 요소에 position: absolute;를 지정하게 되면 float된 요소처럼 위에 붕 뜨게 되고, display 값이 block으로 수정되지만 width 값을 지정하기 않은 경우 부모 요소의 가로 너비를 모두 차지 하지 않고 content만큼 가로 너비를 갖게 되고, width 값을 명시한다고 해도 margin으로 남은 가로 너비를 채우지 않습니다. 즉, 이러한 특징들은 float 속성과 동일합니다.

차이점이라면 위 그림에서 인라인 특성을 갖는 텍스트가 position: absolute;로 설정된 요소에 영향을 받지 않습니다. 즉, 요소를 위로 띄우고, 블록이든 인라인 특성이든 absolute가 지정된 요소를 무시하고 배치가 됩니다(주변에 어떤 것에도 영향을 주지 않음, 천상천하 유아독존같은 존재가 된다).

또 하나의 차이점은 float된 요소는 자신을 포함하고 있는 부모 요소의 영역 안에서만 배치가 되었습니다. 하지만 absolute같은 경우 자신을 포함하고 있는 여러 조상 요소 중에서 자신이 기준을 삼고싶은 요소를 선택할 수 있습니다.
이때 선택되는 기준은 position 속성의 값이 static이 아닌 값(relative, absolute, fixed, sticky)을 갖는 가장 가까운 조상 요소를 기준으로 삼게 됩니다.

따라서 position: absolute;를 사용할 때는 기준이되는 부모 요소를 직접 설정할 수 있습니다. 기준으로 삼고싶은 부모 요소에 position: relative;를 작성하는 것이 일반적입니다. relative 값은 레이아웃에 영향을 주지 않고 위치상 부모 요소를 지정할 수 있습니다.

position: fixed;

배치 기준점이 viewport가 됩니다.
fixed도 absolute와 동일하게 요소를 위로 띄운 후 배치가 됩니다.
display 값이 block으로 수정되지만 가로 너비를 따로 명시하지 않은 경우 부모 너비 전체를 갖지 않고 content만큼 갖게 되고, 만약 가로 너비를 명시하더라고 남는 가로 너비를 margin으로 채우지 않습니다.
block, inline 특성을 갖는 모든 것들이 position: fixed;된 요소를 무시하여 배치가 됩니다.
top, bottom, right, left 속성값으로 % 단위를 사용한다면 뷰포트를 기준으로 너비가 지정됩니다.

absolute와 fixed의 차이점은 fixed는 배치 기준점이 viewport로 고정되어 있으며 변경할 수 없다는 점만 다르며 나머지 특징들은 absolute와 모두 동일합니다.

fixed인 요소의 자식 요소들 또한 위로 뜬 후 함께 배치되며 주위 모든 것들이 위로 뜬 것들을 무시하여 배치가 됩니다.
만약 fixed인 요소의 자식 요소 중 relative인 요소가 존재한다면 그 자식 요소의 기준점은 fixed로 인해 위로 뜬 후 배치가 된 지점이 기준이 됩니다.

참고로 viewport(뷰포트)란 브라우저 창에서 요소들이 렌더링되는 영역중 현재 사용자 눈에 보여지는 영역을 의미합니다.
그러므로 사용자에게 보이는 영역(viewport)에 고정되어 배치하도록 설정이 됩니다. 스크롤을 하더라도 viewport에 고정이 되어 표시됩니다.

position: sticky;

특정 위치를 지나갈 때, 스크롤될 때 fixed처럼 동작하도록 설정합니다.
display 속성값은 수정하지 않습니다.
sticky는 스크롤 되는 대상의 바로 하위 자식 요소에게만 적용할 수 있습니다.
sticky 값 설정한 요소는 스크롤 되어 fixed처럼 계속 동작하지 않고 자신의 부모 영역 내에서만 fixed처럼 동작하게 됩니다. 즉, 부모 요소의 Content 영역을 벗어날 수 없습니다.

top / bottom / right / left

position으로 요소의 배치 기준점을 설정했다면 top, bottom, rigth, left 속성을 통해 요소의 위치를 이동시킬 수 있습니다. 참고로 음수값도 허용이 됩니다.
값 의미 기본값
단위 px, em, rem 등 단위를 작성 auto
% 단위 기준이 되는 요소의 너비(가로, 세로) 비율로 지정
% 단위의 경우 position 값에 따라 기준이 되는 상위 요소가 결정됩니다.
poistion: static;은 배치 기준점이 존재하지 않습니다. 즉, top, bottom, rigth, left 프로퍼티로 배치하는 것이 불가능합니다.
position: relative;의 배치 기준점은 기존 자신의 위치가 되며, % 단위를 사용하는 경우 자기 자신의 너비 비율로 설정됩니다.
position: absolute;의 배치 기준 position 프로퍼티를 사용하는 가장 가까운 상위 요소가 되며, % 단위를 사용하게 되면 배치 기준이 된 요소의 너비 비율로 설정됩니다.
position: fixed;의 경우 기준점은 뷰포트가 되며, % 단위를 사용하는 경우 뷰포트의 너비 비율로 설정됩니다.

값	의미	기본값
단위	px, em, rem 등 단위를 작성	auto
% 단위	기준이 되는 요소의 너비(가로, 세로) 비율로 지정

위 그림처럼 position 속성값으로 설정된 기준(기존 위치, 위치상 부모요소, 뷰포트)의 각 모서리를 기준으로 요소를 이동시킵니다.

위치를 지정할 때 top, bottom 중 하나를 선택하고, right, left 중 하나만 선택하여 위치를 지정합니다.

위 예제는 부모 요소에 position: relative;를 설정하고 width와 heigth를 각각 500px씩 설정하고, 자식 요소에는 width,heigth 값을 각각 200px로 설정하고, position: absolute;를 설정하여 top, left 각각 50%라는 값을 작성하였습니다.

우리의 예상대로라면 부모 요소 정중앙에 자식 요소를 배치될 것이라고 기대하였지만 그렇지 않은 결과가 나왔습니다. 여기서 부모요소의 정중앙에 배치한 것은 자식 요소의 좌측 상단인 빨간점입니다(bottom: 50%; right: 50%;도 정중앙에 배치되지 않음).

우리가 기대한대로 부모 요소의 정중앙에 자식 요소를 배치하기 위해서는 다음과 같은 코드를 작성합니다.

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

transform 속성값으로 translate 2차원 함수를 작성하여 요소를 이동시킵니다. 이때 translate의 기준점은 요소 자신의 좌측 상단을 기준점으로 잡게됩니다. 그리고 % 단위는 자기 자신의 가로 너비 비율, 세로 너비 비율입니다. 즉, 위로 100px, 우측으로 100px 이동시킵니다.

자식 요소가 부모 요소 정중앙에 배치된 것을 볼 수 있습니다.

z-index

position 속성값으로 static을 제외한 모든 값들은 요소를 위로 띄웁니다. 이때 z-index 속성을 통해 요소를 조금 더 위로 띄울 수 있습니다.
속성값으로는 정수를 작성하며, 기본값은 auto를 사용하게 됩니다.

위 요소처럼 child에 position 값을 주게되면 위로 뜨게 됩니다(static 제외).

child3이 가장 위에 쌓이게 되는 이유는 z-index가 전부 지정되어 있지 않고, position 속성값만 작성된 경우 가장 뒤에 작성된 요소가 가장 위에 쌓이게 됩니다.

이때 child1에 z-index: 3;, child2에 z-index: 2;, child3에 z-index: 1;을 각각 작성하게 되면 아래와 같은 결과가 출력됩니다.

요소가 쌓이는 순서는 먼저 position 속성값이 있을 경우 가장 위에 쌓입니다. position 속성값이 모두 존재한다면 다음으로 z-index 속성의 값이 클수록 위에 쌓입니다. 만약 z-index 속성값도 동일하다면 HTML 문서 상 가장 나중에 작성된 요소가 위에 쌓입니다.