position
CSS position 속성은 요소를 배치할 때 사용합니다. HTML코드의 순서에 구애받지 않고 내 마음대로 내가 원하는 자리에 원하는 요소를 배치할 수 있어요. static relative absolute fixed 중 하나의 키워드 값을 선택해 배치합니다.
그럼 각 키워드를 통해 위치를 어떻게 조정시킬 수 있을까요? 하나하나 차례대로 살펴보아요!
0. static
static은 position 속성의 기본값으로, 위치를 지정하지 않았을 때와 같습니다. 따라서, 보통의 경우에는 잘 사용하지 않습니다.
.example {
position: static;
}💥 주의
top, right, bottom, left와 같은 속성이 적용되지 않습니다.
1. relative
relative는 원래 요소가 있는 위치인 static을 기준으로 top, right, bottom, left 프로퍼티를 사용해 위치를 조정합니다.
하지만 static과 사용되기보다 absolute의 기준을 잡아줄 때 relative를 잘 사용합니다. relatve로 설정한 요소(부모)는 absolute로 설정한 요소(자식)의 기준 위치가 되기 때문이죠.
.example {
position: relative;
/* static을 기준으로 위치 조정됨 */
top: 50px;
left: 40px;
}2. absolute
absolute는 가장 가까운 상위 요소를 기준으로 top, right, bottom, left을 통해 위치를 조절할 수 있습니다. 가장 가까운 상위 요소가 없다면 HTML이 기준으로 설정됩니다.
원하는 기준이 될 요소에 position: relative를 주고, 움직일 요소에 position: absolute를 주어 위치를 조정해주는 방식으로 가장 많이 사용됩니다.
아래의 예시와 같은 경우, .example-child는 .example을 기준으로 top방향으로 50px만큼 left방향으로 40px만큼 이동하게 됩니다.
/* 기준이 되는 부모요소 */
.example {
position: absolute;
}
/* 움직일 자식요소 */
.example-child {
position: relative;
top: 50px;
left: 40px;
}3. fixed
fixed는 브라우저 화면의 상대 위치로, 화면이 바뀌더라도 고정된 위치를 설정할 수 있습니다. top, right, bottom, left을 통해 위치를 조절할 수 있습니다.
화면을 스크롤해도 똑같은 위치에 고정시키고 싶은 요소가 있을 때 position: fixed를 잘 사용합니다.
.example {
position: fixed;
}💥 주의
상위 요소의 영향을 받지 않습니다.
참고
