html/css position 속성

html/css의 position은 단어 그대로 요소들을 어떻게 배치할지 결정해주는 속성이다. 자유자재로 다단 레이아웃 등을 짜기 위해서는 필수적으로 알아야 하는 개념으로, static / relative / absolute / fixed 4가지가 있다.

static

position: static;

position: static;은 아무 기능도 없는 가장 기본값으로, 모든 요소는 기본적으로 모두 static한 position의 상태이기 때문에 굳이 써주지 않아도 된다. 요소의 순서대로 배치하며 top, bottom, left, right 속성을 사용할 수 없다.

relative

position: relative;

position: relative;는 해당 요소가 배치되어야 할 곳, 즉 기본 위치인 static 위치를 기준으로 상하좌우로 지정한 값 만큼 움직인다. 따라서 top, bottom, left, right를 사용해서 원하는 위치로 움직일 수 있다.

.box2 {
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
    position: relative;
    top: 40px;
    left: 100px;
    }

box2의 포지션이 static이었다면 box2는 box1의 바로 라애레 위치했을 것이다. 하지만 position: relative;가 적용되어 box2가 위에서 40px, 왼쪽에서 100px만큼 이동된 것을 볼 수 있다.
이처럼, relative를 사용하면 상하좌우로 원하는 값을 주어 요소의 위치를 자유롭게 움직일 수 있다.

absolute

position: absolute;

position: relative;가 static한 상태를 기준으로 움직였다면, position: absolute; relative, absolute, fixed(static 제외 모든 position 속성)가 적용된 부모 요소를 기준으로 움직이게 된다. 위의 속성을 갖고 있는 부모 요소가 여러 개일 경우 가장 가까운 부모를 기준으로 움직인다. 반대로 부모 중 이런 속성을 갖고 있는 요소가 아무것도 없을 경우 body를 기준으로 움직인다.
일반적으로 absolute로 요소를 움직이고 싶을 경우 가장 가까운 부모 요소에 position: relative;를 준다.
다른 요소와 absolute가 구분되는 특징 중 하나는 바로 absolute가 적용된 요소는 inline-element처럼 그 요소의 크기만큼의 너비를 갖게 된다는 것이다.

.box1 {
    width: 400px;
    height: 400px;
    background-color: antiquewhite;
    position: relative;
    
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
    position: absolute;
    bottom: 0;
    right: 0;
}

.box3 {
    width: 100px;
    height: 200px;
    background-color:darksalmon;
    position: absolute;
    left: 20px;
    bottom: 70px;
}

box2는 position: relative;가 적용된 부모인 box1을 기준으로 bottom: 0; right: 0;이 적용됐으므로 box1의 우측 아래로 딱 붙게 된다.
마찬가지로 box3의 경우도 box1을 기준으로 left에서 20px, bottom에서 70px만큼 떨어지게 된다.

fixed

position: fixed;

요소의 위치가 지정한 지점에 딱 고정되는 것으로, 스크롤을 해도 항상 같은 위치에 유지되어 있다.
항상 같은 자리에 있다는 점에서 absolute와 비슷하지만, absolute는 특정 속성을 갖고 있는 부모 요소가 기준이 된다면 fixed는 브라우저(뷰포트)를 기준으로 하기 때문에 스크롤을 내려도 고정되어 있는 것이다.
네비게이션바 등을 상단에 고정할 때 top: 0;값을 줘서 유용하게 사용할 수 있다.

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background-color: black;
    opacity: 0.5; 
}

아래 텍스트까지 스크롤을 해도 상단에 투명도가 적용된 박스가 따라오게 된다.

이렇게 요소에 position: fixed;와 함께 top: 0;값을 주면 스크롤을 해도 계속 상단에 고정되는 것을 알 수 있다.